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

分享于2023年03月15日 angular json ngfor 问答
【问题标题】:Render HTTP-Response as a list in Angular2将 HTTP-Response 渲染为 Angular2 中的列表
【发布时间】:2018-02-09 09:09:25
【问题描述】:

我有一个这样的 json 响应。

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

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

public getData(): Promise {
  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 的值,并将它们显示在列表中

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

CustomerNumber
CustomerName


【解决方案1】:

您应该使用 *ngFor 循环。

在您的模板中:

{{customer.customerNumber}}
{{customer.customerName}}

【讨论】:

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