将 HTTP-Response 渲染为 Angular2 中的列表答案

【问题标题】：Render HTTP-Response as a list in Angular2将 HTTP-Response 渲染为 Angular2 中的列表
【发布时间】：2023-03-14 13:15:01
【问题描述】：

我有一个这样的 json 响应。

{
  "response": {
    "data": {
      "customers": [{
        "customerNumber": "123",
        "customerName": "ABC",
        "customeraddresse": [{
          "address": "test"
        }]
      }, {
        "customerNumber": "345",
        "customerName": "CDS",
        "customeraddresse": [{
          "address": "test1"
        }]
      }]
    }
  }
}

我正在执行这样的请求来获取响应数据。正如我已经检查过的，它将被退回。

public getData(): Promise<any> {
  let payload = JSON.stringify( ... );
  let headers = new Headers({ 'Content-Type': 'application/json'});

  return this.http.post(this.url, payload, { headers: headers })
             .toPromise()
             .then(res => {                  
                this.response_data = res.json().response.data;                  
                return this.response_data;
             })
             .catch(this.handleError);
}

但问题是，我想获取 customerNumber 和 customerName 的值，并将它们显示在列表中

在这个例子中，有两个客户，所以这个标记应该被渲染两次：

<div>
  <div>CustomerNumber</div>
  <div>CustomerName</div>
</div>

【问题讨论】：

标签： json angular ngfor

【解决方案1】：

您应该使用*ngFor 循环。

在您的模板中：

<div *ngFor="let customer of response_data.customers">
      <div>{{customer.customerNumber}}</div>
      <div>{{customer.customerName}}</div>
</div>

【讨论】：

技术上应该是let customer of response_data.customers
@AndreiMatracaru 谢谢。已编辑。
非常感谢@Matsura 和@Andrei Matracaru。它对我有用
@ananya 如果对你有帮助，你应该接受答案。