如何解析收到的javascript对象以响应发布请求并将其显示在角度页面中

Question

以下是服务电话

this.http.post(this.apiurl, {'user': this.user}, { responseType: 'json' })
      .subscribe((data) => {
         this.myRequests = JSON.stringify(data);
         const requests = JSON.parse(this.myRequests);
         this.Items = requests.filter(function(o) {
          return o.detail;
         }); 
      },
      err => {
        console.log(err);
      });
  }

以下是从服务电话收到的回复：

Array [ {…}, {…} ] --> This is the array of object

以下是数组内容：

 0: Object { detail: {'id':'1', 'type': 'service1'} }
 1: Object { detail: {'id':'2', 'type': 'service2'} }

以下是HTML

 <ul>
  <li *ngFor="let each of Items">
    {{each.request_id}}
  </li>
</ul>

Answer 1

访问detail.id属性

<ul *ngFor="let each of Items">
   {{each.detail.id}}
</ul> 

Answer 2

要获取<ul *ngFor="let each of Items"> {{each.detail.id}} </ul> ，请使用以下

item

此外，您应该更喜欢并使用更多上下文名称，例如each代替ngFor，如果是长代码和嵌套 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ，则会松开上下文。

进行调整，plunker

Answer 3

尝试设置：return o;

然后使用{{each.detail.id}}

进行访问

Answer 4

您可以使用HttpClient的post方法的通用版本，它允许您指定请求的响应类型。

在您的情况下，响应格式似乎如下：

"Connection timeout."

因此，您可以通过以下方式发出http请求：

interface Response {
    detail: Detail
}
interface Detail {
    id: string;
    type: string;
}