Question

我正在使用服务为Angular 7项目中的表获取JSON格式的数据。这就是服务的定义。

 getLandingDashboardSnapshotDetails() {
    return this.http.get<Snapshot[]>('<removed>');
  }

这是服务中使用的快照模型

export interface Snapshot {
   RequestsPendingApproval: string,
   TotalApprovedRequests: string,
   TotalDrafts: string,
   TotalRejectedRequests: string 
}

这是我在.ts文件中定义的。

LandingDashboardSnapshotData: Snapshot[];

ngOnInit() {
    this.messageService.getLandingDashboardSnapshotDetails().subscribe(
      response => {
        this.LandingDashboardSnapshotData = response;
        console.log(this.LandingDashboardSnapshotData)
      },
      errorResponse => { console.log(errorResponse) }
    );

这就是我试图在表中显示数据的方式。

<div class="container">
    <table class='reports'>
        <tr *ngFor = "let d of LandingDashboardSnapshotData">
            <th class="reports-data">Pending for Approval : {{ d.RequestsPendingApproval }} </th>
            <th class="reports-data">Total Sent : 11</th>
            <th class="reports-data">Total Drafts : 4</th>
            <th class="reports-data"> Total Rejected : 4</th>
        </tr>
    </table>
</div>

我可以使用console.log（）查看服务中的数据。但是，当我尝试运行此命令时，出现一条错误消息：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到Iterables，例如数组。我不明白为什么会收到错误消息。我还能如何显示数据？

Answer 1

在您的服务文件中

getLandingDashboardSnapshotDetails() {
    return this.http.get<Snapshot>('<removed>');
  }

，然后在组件文件中将LandingDashboardSnapshotData: Snapshot[];替换为LandingDashboardSnapshotData: Array<Snapshot>;，然后在构造函数中将其定义为空数组，并在收到服务响应后尝试将其推入数组，因为您正在获取对象因此不需要分配它，只需将其推入数组即可。

export class AppComponent  {
  LandingDashboardSnapshotData: Array<Snapshot>;

constructor(private http: HttpClient) {
  this.LandingDashboardSnapshotData = [];
}

ngOnInit() {
    this.getLandingDashboardSnapshotDetails().subscribe(
      (response) => {
        this.LandingDashboardSnapshotData = response;
        console.log(this.LandingDashboardSnapshotData)
      }
    );
}
}

这是一个有效的示例link。

Answer 2

似乎您的ListViewItem返回的不是数组。

typescript声明仅用于开发方面，而类型的声明在转换为JavaScript时变得不可用。

因此，您的this.http.get返回this.http.get，但是您尝试使用仅接受数组的NgFor进行迭代。

Answer 3

根据您的评论“不，每个值仅包含一个值。这就是* ngFor无法正常工作的原因...”尝试此操作...

<div class="container">
    <p class='reports' *ngIf="LandingDashboardSnapshotData">
        {{ LandingDashboardSnapshotData.RequestsPendingApproval }} <br/>
        {{ LandingDashboardSnapshotData.TotalRejectedRequests }} <br/>
        etc...
    </p>
</div>

无法从HTML表中的服务读取数据

3 个答案: