HTML -> Angular2

[zioarnold]

<style type="text/css">
    .label {
        background-color: #d1dade;
        color: #5e5e5e;
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 10px;
        font-weight: 600;
        padding: 3px 8px;
        text-shadow: none;
    }

    .badge {
        background-color: #d1dade;
        color: #5e5e5e;
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 11px;
        font-weight: 600;
        padding-bottom: 4px;
        padding-left: 6px;
        padding-right: 6px;
        text-shadow: none;
    }

    .label-primary,
    .badge-primary {
        background-color: #1ab394;
        color: #FFFFFF;
    }

    .label-success,
    .badge-success {
        background-color: #1c84c6;
        color: #FFFFFF;
    }

    .label-warning,
    .badge-warning {
        background-color: #f8ac59;
        color: #FFFFFF;
    }

    .label-warning-light,
    .badge-warning-light {
        background-color: #f8ac59;
        color: #ffffff;
    }

    .label-danger,
    .badge-danger {
        background-color: #ed5565;
        color: #FFFFFF;
    }

    .label-info,
    .badge-info {
        background-color: #23c6c8;
        color: #FFFFFF;
    }

    .label-inverse,
    .badge-inverse {
        background-color: #262626;
        color: #FFFFFF;
    }

    .label-white,
    .badge-white {
        background-color: #FFFFFF;
        color: #5E5E5E;
    }

    .label-white,
    .badge-disable {
        background-color: #2A2E36;
        color: #8B91A0;
    }
</style>
<script> $('#myCarousel').carousel({interval: 3000})</script>
<div id="myCarousel" class="carousel">
    <ol class="carousel-indicators" style="visibility: hidden">
        <li data-target="#myCarousel" data-slider-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slider-to="1"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item">
            <!---->
            <div class="wrapper wrapper-content animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <h2><strong>Processi Schedulatori Non Completati</strong></h2>
                            <div class="ibox-content">
                                <table class="footable table table-stripped default breakpoints" #scheduler>
                                    <thead>
                                    <tr>
                                        <th class="footable-visible footable-first-column footable-sortable">
                                            Mappa<span
                                                class="footable-sort-indicator"></span></th>
                                        <th class="footable-visible  footable-sortable">Conteggio<span
                                                class="footable-sort-indicator"></span></th>
                                        <th class="footable-visible  footable-sortable">Data<span
                                                class="footable-sort-indicator"></span></th>
                                        <th class="footable-visible footable-last-column footable-sortable">
                                            Stato<span
                                                class="footable-sort-indicator"></span></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr *ngFor="let monitor of schedulerList; let scheduList = index;"
                                        style="display: table-row;">
                                        <td class="footable-visible footable-first-column">{{monitor.mappa}}</td>
                                        <td class="footable-visible">{{monitor.conteggio}}</td>
                                        <td class="footable-visible">{{monitor.dataCreazione | date: 'dd/MM/yyyy'}}</td>
                                        <td class="footable-visible">
                                            <span [ngClass]="{'label label-danger': monitor.stato=='ERROR'}||
                                                            {'label label-primary':monitor.stato =='RUNNING'}||
                                                    {'label label-success':monitor.stato=='READY'}">{{monitor.stato}}
                                            </span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!---->
        </div>
        <div class="item active">
            <!---->
            <div class="wrapper wrapper-content animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <h2><strong>Monitor Conservazione</strong></h2>
                            <div class="ibox-content">
                                <table class="footable table table-stripped default breakpoints" #openreports>
                                    <thead>
                                    <tr>
                                        <th class="footable-visible footable-first-column footable-sortable">
                                            Cliente<span
                                                class="footable-sort-indicator"></span></th>
                                        <th class="footable-visible  footable-sortable">
                                            Totale<span
                                                class="footable-sort-indicator"></span></th>
                                        <th class="footable-visible  footable-sortable">
                                            Data Creazione<span
                                                class="footable-sort-indicator"></span></th>
                                        <th class="footable-visible footable-last-column footable-sortable">
                                            Giorni<span
                                                class="footable-sort-indicator"></span></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr *ngFor="let reports of openReportsList; let reportsList = index;"
                                        style="display: table-row;">
                                        <td class="footable-visible footable-first-column">{{reports.cliente}}</td>
                                        <td class="footable-visible">{{reports.totale}}</td>
                                        <td class="footable-visible">{{reports.dataCreazione | date: 'dd/MM/yyyy'}}</td>
                                        <td class="footable-visible footable-last-column">{{reports.giorni}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!---->
        </div>
    </div>
    <a href="#myCarousel" class="carousel-control right" data-slide="next">
        <span class="icon-next"></span>
    </a>
    <a href="#myCarousel" class="carousel-control left" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
</div>

Greetings friends, I have this templateUrl. The problem consist on page loading...

So when I try to comment openResultsList the shedulerList shows data correctly.

When I try to use both list to show, it show nothing...

 

In addition openResultsList it has an array from different url (that return json array) instead of schedulerList

import {Component, ViewChild, ElementRef, AfterViewInit} from "@angular/core";
import {SchedulerService} from "./scheduler.service";
import {SearchResult} from "../utils/search.result";

declare var $: any;

@Component({
    moduleId: module.id,
    selector: 'monitor-scheduler',
    templateUrl: 'scheduler-page.component.html'
})
export class SchedulerPageComponent implements AfterViewInit {
    schedulerList: SearchResult = new SearchResult();
    openReportsList: SearchResult = new SearchResult();
    constructor(private schedulerService: SchedulerService) {

        this.schedulerService.getScheduleList().then(
            result => this.schedulerList = result,
            error => console.log(error));

        this.schedulerService.getAllOpenReports().then(
            res => this.openReportsList = res,
            error => console.log(error));
    }

    @ViewChild('scheduler') scheduler: ElementRef;
    @ViewChild('openreports') openreports: ElementRef;

    ngAfterViewInit() {

        $(this.scheduler.nativeElement).footable();
        $(this.openreports.nativeElement).footable();
    }
}

In above type script file, the result and res are initialized... Ok.

What I doing wrong?

Edited December 20, 2016 by zioarnold