我有一个从 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 之外的原始数据)。
然后我有一个 Angular 组件,它调用服务 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>
我错过了什么?
最佳答案
如果您使用接口(interface)定义模型,然后使用该接口(interface)作为 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);
}
编辑:如果你想在上面添加console.log,你需要像这样添加:
public getData() {
this.apiService.getData().subscribe((data: Product[]) => {
this.records = data;
console.log(this.records);
);
}
模板
<div *ngIf="records">
<p> {{ records.length }}</p>
...
</div>
当模板首次出现时,异步数据检索过程可能尚未完成。因此,通过在页面周围放置 ngIf
,它在检索数据之前不会尝试显示元素。
关于django - 将 JSON 响应 observable 转换为 Angular ( typescript )对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54625967/