Angular 6 * ng用于不更新视图

Question

我正在使用* ngFor填充物料卡，但没有显示绑定

它在DOM中显示了此内容，但是当我控制台绑定的变量时，它显示了值，但仍然没有填充我的辅助卡。

注意：-当我单击任何表单字段框时，其更改为<!--bindings={ "ng-reflect-ng-for-of": "[object Object],[object Object" }-->，并且数据开始显示

下面是我的代码

<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>

我浏览了以下参考链接：

angular2 ngFor not working while fetching data from api on ngOnInit()

Answer 1

欢迎使用异步编程：）

您还没有提供有关如何从api获取数据的详细信息。数据可用后，*ngFor就会为我们呈现结果。

相关的 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);
  }

}

相关的 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); }
    )
  }
}

相关 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>

完成working stackblitz here