arrays - 如何在 html Nativescript 中显示 Json 多条数据
问题描述
我有这个 JSON,我需要显示如下所有数据:
res {
"StatusCode": 0,
"StatusMessage": "OK",
"StatusDescription": [
{
"sensors": [
{
"serial": "sensor1",
"id": "1"
},
{
"serial": "sensor2",
"id": "2"
},
{
"serial": "sensor3",
"id": "3"
}
],
"HBP_id": "12",
"HB_id": "123",
"serial_number": "hb1",
"note": "test"
},
{
"sensors": [
{
"serial": "sensor4",
"id": "4"
},
{
"serial": "sensor5",
"id": "5"
},
{
"serial": "sensor6",
"id": "6"
}
],
"HBP_id": "23",
"HB_id": "234",
"serial_number": "hb2",
"note": "test"
},
{
"sensors": [
{
"serial": "sensor7",
"id": "7"
},
{
"serial": "sensor8",
"id": "8"
}
],
"HBP_id": "34",
"HB_id": "345",
"serial_number": "hb3",
"note": "test"
}
]
}
我想在 html Nativescript 中显示这些数据:
产品一:
序列号:hb1
传感器:传感器1 传感器2 传感器3
序列号:HB2
传感器:sensor3 sensor4 sensor5
序列号:HB3
传感器:sensor7 sensor8
我试过这段代码,但我只能显示第一个数据:
<ListView [items]="items" (itemTap)="onItemTap($event)">
<ng-template let-item="item" let-i="index" let-odd="odd" let-even="even">
<StackLayout [class.odd]="odd" [class.even]="even">
<Label [text]="item.serial_number"></Label>
<Label *ngFor="let subItem of item?.sensors" [text]="subItem.serial"></Label>
</StackLayout>
</ng-template>
</ListView>
组件.ts:
public items: Items[];
constructor(private service: ItemsService) {
}
public ngOnInit() {
this.getallitems();
}
getallitems() {
this.service.itemsGetAll().subscribe(
items=> {
console.log('itemsfrom ws',items) // show all
this.items= items;
}
);
}
服务.ts
public itemsGetAll(): Observable<Items[]> {
let headers = new Headers();
headers.append('x-access-token', this.auth.getCurrentUser().token);
return this.http.get(Api.getUrl(Api.URLS.itemsGetAll), {
headers: headers
})
.pipe(map((response: Response) => {
console.log('response', response)
let res = response.json();
if (res.StatusCode === 1) {
} else {
return res.StatusDescription.map(hbp => {
return hbp;
});
}
}))
}
展示:
序列号:hb1
传感器:传感器1 传感器2 传感器3
你能问我,如何在项目中使用 *ngFor 吗?请问有什么想法吗?
更新:我像这样更改我的html:
<StackLayout [class.odd]="odd" [class.even]="even">
<Label *ngFor="let item of items" [text]='"[" + item.serial_number +"] " + item?.sensors'></Label>
</StackLayout>
解决方案
你应该改变这个:
<ListView [items]="items?.StatusDescription" (itemTap)="onItemTap($event)">
//Your code here
</ListView>
其余代码将相同!
推荐阅读
- php - 检查匹配并排序数组
- angular - 角度模板检查返回错误对象可能为空
- angular - 根据 http 响应值 angular 动态显示字体真棒图标
- php - 如何使 PHP 变量返回文本而不是任何内容
- amazon-web-services - 通过 AWS lambda 查询和更新 Redshift
- python - 如何通过列的近似值组合/合并数据框?
- python - ResNet,在 Google Colab 中使用 decode_predictions 时访问了错误的数据
- php - PHP INCLUDE 后不显示 HTML
- c# - 是否可以让 tesseract ocr 直接读取屏幕?
- windows - 如何切换html文件