绑定API Angular中的数据？

Question

我正在尝试绑定来自 API 的数据，数据显示在 .network 中但是当我尝试绑定数据时它给我一个错误 -

Cannot find a differ supporting object
function'. NgFor only supports binding to Iterables such as Arrays.

API 网络数据

 [{deliveryid: 0, frequency: "", ContactName: "Aa", Email: "aa@we.com",…},…]
     
//While expanding the response

{deliveryid: 0, frequency: "", ContactName: "Aa", Email: "aa@we.com"}

.TS

  public MyDigestEmailIdPrint = [];
  DigestEmailIdPrint() {
    var postData = {
    clientid: localStorage.getItem("storageselectedclient"),
  };

    this.article.DigestEmailIdPrint(postData).subscribe(
    (res) => { 
    if (res.message != "No Record Found") {
       this.MyDigestEmailIdPrint.push(res);
    }
  },
  (err) => {
    console.log(err);
  }
);

}

.HTML

<tbody>
  <tr *ngFor="let details of MyDigestEmailIdPrint">
    <td> {{details.ContactName}}</td>
    <td> {{details.Email}}</td>
    <td> {{details.frequency}}</td>
    <td><input type="checkbox"></td>
  </tr>

</tbody> 

Answer 1

DigestEmailIdPrint是 function 并且不返回任何内容。 也许你应该在MyDigestEmailIdPrint中使用ngFor但正如评论中指出的那样，你从后端获得的数据不是数组。

你可以这样修复它：

if (res.message != "No Record Found") {
    // use the spread syntax to create a new array and trigger change detection
    this.MyDigestEmailIdPrint = [...res.result];
}

Answer 2

我建议您检查res类型。 它似乎必须是 object，这就是错误指向NgFor only supports binding to Iterables such as Arrays.

该错误不仅与此有关，问题是您什么时候调用 API 并且视图加载到那个时候？

解决方案 1：如果您在组件中的响应是不同类型的，您可以将其转换为数组。

解决方案 2：检查数据何时加载到视图中。 您应该知道生命周期挂钩，以便在正确的时间获取数据以获取组件中的内容。

解决方案 3：

if (res.message != "No Record Found") {
    // node need to push data to MyDigestEmailIdPrint
    // this.MyDigestEmailIdPrint.push(res); // add the data in the array
    this.MyDigestEmailIdPrint = res; // if res is an array it is fine to assign
}