Angular response data not showing in html page-CodePudding

Data is coming from API and I see the console log but html page not showing!

component.ts

export class AuthComponent implements OnInit {
  appSetting: AppSetting[] = [];
  constructor(private http: HttpClient) {}

  async ngOnInit() {
    await this.AppSetting().then((result: AppSetting[]) => {
      this.appSetting = result;
    });
    console.log(this.appSetting);
  }

  async AppSetting() {
    return await this.http
      .get<AppSetting[]>(environment.apiUrl   '/AppSetting/GetsPublich')
      .toPromise();
  }
}

component.html

<ul *ngFor="let item of appSetting">
  <li>{{item.name}}</li>
</ul>
<router-outlet></router-outlet>

CodePudding user response：

You have to use | async in the *ngFor while using the async function.

<ul *ngFor="let item of appSetting | async">
  <li>{{item.name}}</li>
</ul>

CodePudding user response：

Perhaps this is because of that you are trying to display data before the data is fetched by the async function. May be you can solve this problem easily by not initializing the array; so change this:

appSetting: AppSetting[] = [];

appSetting: AppSetting[];

And surround the <ul> with the <div *ngIf="appSetting">...</div> like this below:

<div *ngIf="appSetting">
  <ul *ngFor="let item of appSetting">
    <li>{{item.name}}</li>
  </ul>
</div>