如何在 angular 中显示来自 json 数组的数据 7
How display data from json array in angular 7
我有一个 json 数据集,其中的数组来自我的 ASP.net 核心网络 api,我想在 angular html 页面中显示该数据.你能帮帮我吗
angular 7 cli
首页-page.component.ts
ngOnInit() {
this.serverService.getAllProductData().subscribe(
(response:Response)=>{
let result = response;
console.log(result);
}
);
}
数据来自网络API
[
{
"productId": 1,
"productName": "product 1",
"productPrice": 500
},
{
"productId": 2,
"productName": "product 2",
"productPrice": 1000
},
{
"productId": 3,
"productName": "product 3",
"productPrice": 2000
},
{
"productId": 4,
"productName": "PRODUCT 4",
"productPrice": 3000
},
{
"productId": 5,
"productName": "produt 5",
"productPrice": 10000
}
]
您需要使用 ngFor
迭代项目
<ul>
<li *ngFor="let resultObj of result">
{{ resultObj.productName}}
</li>
</ul>
也在 ngOnInit 之外的 TS 中全局声明结果。
result : any;
ngOnInit() {
this.serverService.getAllProductData().subscribe(
(response:Response)=>{
this.result = response;
console.log(result);
}
);
}
您可以使用 Sajeetharan 的回答,或尝试 async
自动取消订阅 Observable 的管道。
public getAllProductData$: Observable<any> = undefined;
ngOnInit() {
this.getAllProductData$ = this.serverService.getAllProductData();
}
和模板:
<div *ngIf="(getAllProductData$ | async) as data">
<ul>
<li *ngFor="let item of data">
{{ item.productName}}
</li>
</ul>
</div>
祝你好运!
我有一个 json 数据集,其中的数组来自我的 ASP.net 核心网络 api,我想在 angular html 页面中显示该数据.你能帮帮我吗
angular 7 cli
首页-page.component.ts
ngOnInit() {
this.serverService.getAllProductData().subscribe(
(response:Response)=>{
let result = response;
console.log(result);
}
);
}
数据来自网络API
[
{
"productId": 1,
"productName": "product 1",
"productPrice": 500
},
{
"productId": 2,
"productName": "product 2",
"productPrice": 1000
},
{
"productId": 3,
"productName": "product 3",
"productPrice": 2000
},
{
"productId": 4,
"productName": "PRODUCT 4",
"productPrice": 3000
},
{
"productId": 5,
"productName": "produt 5",
"productPrice": 10000
}
]
您需要使用 ngFor
迭代项目 <ul>
<li *ngFor="let resultObj of result">
{{ resultObj.productName}}
</li>
</ul>
也在 ngOnInit 之外的 TS 中全局声明结果。
result : any;
ngOnInit() {
this.serverService.getAllProductData().subscribe(
(response:Response)=>{
this.result = response;
console.log(result);
}
);
}
您可以使用 Sajeetharan 的回答,或尝试 async
自动取消订阅 Observable 的管道。
public getAllProductData$: Observable<any> = undefined;
ngOnInit() {
this.getAllProductData$ = this.serverService.getAllProductData();
}
和模板:
<div *ngIf="(getAllProductData$ | async) as data">
<ul>
<li *ngFor="let item of data">
{{ item.productName}}
</li>
</ul>
</div>
祝你好运!