Zone Aware Promise View not Displaying

Issue

My view is not displaying the data that is being returned from the Service layer. I can see the data in the console.log so I know the data is being returned. Is there anything In the view that I need to add?

View

<table class="adminConfig-settings-list  table">
    <thead>
        <tr>
            <td>Name</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <template ngFor let-status [ngForOf]="statuses">
            <tr>
                <td>
                    <b>{{statuses.ConfigName}}</b>
                </td>
                <td>
                    {{statuses.ConfigSetting}}
                </td>
            </tr>
        </template>
    </tbody>
</table>

Service Log array
Service Log array has the data

get(): Promise<AdminConfigModel[]> {
        console.log('Get AdminConfig');
        console.log(this.apiUrls.Get);
        var AdminConfig = this.http.get(this.apiUrls.Get, { headers: ServiceBase.headers }).map(x => <AdminConfigModel[]>x.json()).toPromise();
        console.log(AdminConfig);
        return AdminConfig;
    }

index.ts

  ngAfterViewInit() {
        console.log(this.dataService.get().then(x => this.statuses = x));
        this.dataService.get().then(x => this.statuses = x);
    }

Solution

I believe that inside your template status should used instead of statuses

Ex.
{{statuses.ConfigName}}
should be changed to {{status.ConfigName}}

Similarly for the other occurrence.

Answered By – Tushar Shukla

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0