如何在 html Nativescript 中显示 Json 多条数据

Question

我有这个 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 中显示这些数据：

产品 1：

系列： hb1

传感器： 传感器1 传感器2 传感器3

系列： hb2

传感器： 传感器3 传感器4 传感器5

系列： hb3

传感器： 传感器7 传感器8

我试过这段代码，但我只能显示第一个数据：

<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>

component.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;
        }
    );
}

service.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>

Answer 1

你应该改成这样：

<ListView [items]="items?.StatusDescription" (itemTap)="onItemTap($event)">
  //Your code here
</ListView>

其余代码将相同！！！

Answer 2

你可以试试这个解决方案

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.StatusDescription;
        }
    );
}