Unable to fetch object for ngFor in angular component - html

Question

I am trying to show data in table using ngFor but it is unable to fetch the object that contains data in it. I called 2 services in my ngOnInit method and merged their data together using promises but i am unable to fetch that object in ngFor in my html file
html file
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Date/Time</th>
<th>Course</th>
<th>Location</th>
<th>Instructor</th>
<th>Enrolled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let obj of completeData">
<td class="trim">{{obj.date}}</td>
<td class="trim">{{obj.course}}</td>
<td class="trim">{{obj.location}}</td>
<td class="trim">{{obj.instructor}}</td>
<td class="trim">Yes</td>
<td class="trim">
<nb-select>
<nb-option value="2">Edit</nb-option>
<nb-option value="3">Delete</nb-option>
<nb-option value="4">View</nb-option>
</nb-select>
</td>
</tr>
</tbody>
</table>
component.ts file
export class UpcomingClassesComponent implements OnInit {
times: ClassTimes = new ClassTimes();
schedule: ClassSchedule = new ClassSchedule();
classes: any;
timing: any;
data: any;
completeData: any;
constructor(private router:Router,
private _classService: ClassServiceProxy) {
}
ngOnInit() {
let dataPromise = new Promise((resolve) => {
this._classService.GetClassData()
.subscribe((result: any) => {
resolve(result[0]);
})
});
let timesPromise = new Promise((resolve) => {
this._classService.GetClassTimes()
.subscribe((result: any) => {
resolve(result[0]);
})
});
Promise.all([dataPromise, timesPromise])
.then((values) => {
//console.log(values);
//let completeData = { ...values[0], ...values[1]};
this.completeData = Object.assign({}, values[0], values[1]);
//console.log(this.completeData);
//console.log("final results : ", completeData);
});
}
}

Answer 1

You might need to force change detection. Try the below code. NgZone
constructor(private zone: NgZone) {
//...
});
this.zone.run(() => {
this.completeData = Object.assign({}, values[0], values[1]);
});