如何从 Angular5 和 Ionic3 中的 json 格式检索数据

Question

我正在尝试从产品 API 获取数据。我收到来自 json 文件的响应，但我不知道如何使用这些数据在屏幕上打印所有产品名称。

搜索.ts：

export class SearchPage {
searchQuery: string = '';
items: string[];
data:object={};
constructor(public navCtrl: NavController, private apiService: ApiService) {
this.initializeItems();
}
initializeItems() {
this.apiService.productsCall().subscribe(response => {
//console.log(response);
if(response['status'] == 200) {
// console.log(response['response']);
this.data=response['response'];
console.log(this.data);
} else if(response['status'] == 500) {
console.log(response['error'].sqlMessage);
}
});
this.items=[
'Knee',
'Knee Cap'
];
}
}

搜索.html：

<ion-grid *ngFor="let item of items">
<ion-row>
<ion-col col-2>
<img src='../assets/imgs/doctor.png'>
</ion-col>
<ion-col col-offset-1></ion-col>
<ion-col col-9>
Product name goes here
</ion-col>
</ion-row>
</ion-grid>

杰森

{"状态"：

200，"错误"：空，"响应"：[{"product_id"：1，"名称"："膝盖 上限"，"价格"：1290，"重量"：0.4，"short_desc"："颈部疼痛缓解颈椎 柔软的皮洛"，"long_desc"："非常适合侧面/背部 卧铺"，"category_id"：3，"units_in_stock"：8，"units_on_order"：7，"discount_available"：10，"图像"："图像/Knee_Cap_1 .png"}，{"product_id"：2，"名称"："软 枕头"，"价格"：1299，"重量"：0.3，"short_desc"："缓解颈部疼痛 颈椎软枕"，"long_desc"："非常适合侧/背 卧铺"，"category_id"：1，"units_in_stock"：10，"units_on_order"：8，"discount_available"：12，"图像"：空}，{"product_id"：3，"名称"："手腕 支架"，"价格"：250，"重量"：0.12，"short_desc"："健康精灵腕支架 拇指支持一种尺寸，"long_desc"："有助于缓解虚弱 或手腕酸痛，舒适的压力和身体保温，提供 最高级别 舒适"，"category_id"：2，"units_in_stock"：8，"units_on_order"：7，"discount_available"：10，"图像"：空}]}

Answer 1

您可以立即将响应映射到this.items并在视图中使用它，而不是绑定到this.data。

export class SearchPage {
searchQuery: string = '';
// make items hold everything about an item, not just the name
items: any[];
constructor(public navCtrl: NavController, private apiService: ApiService) {
this.initializeItems();
}
initializeItems() {
this.apiService.productsCall().subscribe(response => {
//you might need response = JSON.parse(response) if it's still string format
if(response.status == 200) {
this.items = response.response;
}
}, error => {
console.log("error occurred");
});
}
}

并在视图中相应地打印项目名称：

<ion-grid *ngFor="let item of items">
<ion-row>
<ion-col col-2>
<img src='../assets/imgs/doctor.png'>
</ion-col>
<ion-col col-offset-1></ion-col>
<ion-col col-9>
{{ item.name }} price: {{ item.price }} 
</ion-col>
</ion-row>
</ion-grid>

Answer 2

请尝试此代码，也许这会对您有所帮助。

<ion-grid *ngFor="let item of data">
<ion-row>
<ion-col col-2>
<img src='../assets/imgs/doctor.png'>
</ion-col>
<ion-col col-offset-1></ion-col>
<ion-col col-9>
{{item.name}}
</ion-col>
</ion-row>