Angular 6 *ngFor not updating view - angular6

Question

I am using material card to get populated using *ngFor but it does not show binding
it shows this in the DOM ,but when I console my binded variable, it shows the value but still my mat-card not get re populated.
NOTE :-- when I click on any form field box its then changed to <!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--> this and data starts showing
Below is my code
<mat-card class="inner-list-card" *ngFor="let uglist of userGroupViewModel.UserGroupList"
(click)="getDetails(uglist['groupId'],$event)" routerLink="scope">
<div class="inner-card">
<li class="pointer">
<span class="listIcon">
<i class="fa fa-users"></i>
</span>
<a class="textwrap">
{{ uglist.groupName }}
<small class="listDate">Last Updated: {{ uglist.updatedOn*1000 | date }}</small>
</a>
<span>
<a class="protected">
<img alt="" src="assets/protected.png" height="25px" width="23px">
</a>
</span>
</li>
</div>
<div class="desc"> {{ uglist.description }}</div>
<div class="routing-element">Show
More
<i class="fa fa-angle-right alignRight" aria-hidden="true"></i>
</div>
</mat-card>
and I went through the below reference links:
angular2 ngFor not working while fetching data from api on ngOnInit()

Answer 1

Welcome to asynchronous programming :)
You have not included the details of how you're getting the data from your api... what i have done is used observable to which i subscribed. As soon as the data is available, the *ngFor renders the result for us.
relevant service.ts:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Injectable({
providedIn: 'root',
})
export class MyService {
apiURL: string = 'https://ddxhruyrrj.execute-api.us-east-2.amazonaws.com/aiProd/projectslazy';
constructor(private http: HttpClient) { }
getData() {
return this.http.get(this.apiURL);
}
}
relevant component.ts:
export class CardFancyExample {
dataSet:any;
constructor(private serv: MyService) {
this.serv.getData().subscribe(
dataa => { console.log(dataa); this.dataSet = dataa; }
, errr => { console.log(errr); }
)
}
}
relevant html:
<div *ngIf="dataSet== ''">
No data loaded
</div>
<div *ngIf="dataSet != ''">
<mat-card class="example-card" *ngFor="let data of dataSet">
<mat-card-header>
<mat-card-title>{{data?.project}}</mat-card-title>
<mat-card-subtitle>{{data?.role}}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="https://www.akberiqbal.com/JumboMob.jpg" alt="Akber Iqbal">
<mat-card-content>
<p>
{{data?.description}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</div>
complete working stackblitz here