我有一个服务API，可从Django-REST中提取数据。返回的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});
没有错误或警告，但是当我尝试访问记录数组时，在组件的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>
我想念什么？
如果使用接口定义模型，然后将该接口用作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在页面周围放置一个空格，它将不会尝试显示元素，直到检索到数据为止。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句