Django 将可观测的JSON响应转换为角度（typescript）对象数组

我有一个从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函数将可观察对象转换为对象数组：

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});

导出类数据实现OnInit{
私有记录=数组=[]；
...
构造函数（私有apiService:apiService）{}
恩戈尼尼特（）{
这是getData（）；
}
公共获取数据（）{
this.apiService.getData（）.subscribe（（数据：数组）=>{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>

{{records.length}
制造商
{{record.manufacturer}}

---

我缺少什么？

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

例如：

接口

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

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

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

数据服务

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

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

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

模板

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

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

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

{{records.length}

...

---

当模板首次出现时，异步数据检索过程可能尚未完成。因此，通过在页面周围放置

ngIf

，在检索数据之前，它不会尝试显示元素。

您需要将异步管道添加到其中

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

{{record.manufacturer}}

我认为问题在于，您试图在不进行解析的情况下将数据分配到对象中。您能提供一个演示吗？使用JSON解析您的数据。如果数据是从服务器端字符串化的，则使用parse（数据）。不要将Array=[]分配到您的records变量中，只需声明它即可