将可观察的 JSON 响应转换为角度（打字稿）对象数组答案

【问题标题】：Converting JSON response observable to angular (typescript) object array将可观察的 JSON 响应转换为角度（打字稿）对象数组
【发布时间】：2019-07-04 16:14:00
【问题描述】：

我有一个从 Django-REST 中提取数据的服务 API。返回的 JSON 如下所示：

[
{
    "manufacturer": "Mfg",
    "model": "Model",
},
{
    "manufacturer": "Mfg2",
    "model": "Model2",
}
]

服务API函数getData返回：

return this.httpClient.get(`${this.apiURL}/data/`);

注意我在 Django 中使用 ListAPIView，并且我已经验证了上面的 URL 返回了上面显示的 JSON 对象（尽管我必须添加 ?format=json 来获取 Django 的 APIView 之外的原始数据）。

然后我有一个角度组件，它调用服务 API 函数将 observable 转换为对象数组：

export class Data implements OnInit {

private records = Array<object> = [];

...

constructor(private  apiService:  ApiService) {}

ngOnInit() {
  this.getData();
}

public getData() {
 this.apiService.getData().subscribe((data: Array<object>) => {this.records = data});

没有错误或警告，但在组件的 HTML 文件中，当我尝试访问记录数组时，它的长度始终为 0。例如，以下将打印“0”和一个空表。

<P> {{ records.length }}</P>
<table>
  <tr>
    <th>Manufacturer</th>
  </tr>
  <tr *ngFor="let record of records">
    <td> {{ record.manufacturer }} </td>
  </tr>
</table>

我错过了什么？

【问题讨论】：

我认为问题在于您试图将数据分配给对象而不进行解析。你能提供一个演示吗？
使用 JSON.parse(data) 解析您的数据，如果它是从服务器端字符串化的。
不要将 Array

标签： django angular django-rest-framework

【解决方案1】：

您需要向其中添加异步管道。

<tr *ngFor="let record of records|async">
    <td> {{ record.manufacturer }} </td>
  </tr>

【讨论】：

【解决方案2】：

如果您使用接口定义模型，然后将该接口用作 get 调用的通用参数，则 HttpClient 会自动将响应映射到定义的结构。

例如：

界面

export interface Product {
  manufacturer: string;
  model: string;
}

数据服务

return this.httpClient.get<Product[]>(`${this.apiURL}/data/`);

组件

private records: Product[];

public getData() {
 this.apiService.getData().subscribe((data: Product[]) => this.records = data);

模板

<div *ngIf="records">
 <p> {{ records.length }}</p>
 ...
</div>

当模板首次出现时，异步数据检索过程可能尚未完成。因此，通过在页面周围放置ngIf，它不会尝试显示元素，直到检索到数据。

【讨论】：