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"
        }
       ]
     }

我想以Nativescript显示

serial_number: hb1
sensors : sensor1

我尝试了这段代码，但是有了它我只能显示序列号：

   <StackLayout class="page">
        <ListView [items]="items" class="list-group">
             <ng-template let-item="item">
                 <Label [text]="item.serial_number"
                  class="list-group-item"></Label>
             </ng-template>
        </ListView>
   </StackLayout>

请，您能问我如何显示和序列化的想法吗？

谢谢

解决方案：

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

Answer 1

您可以尝试嵌套<ng-template>

<StackLayout class="page">
    <ListView [items]="items" class="list-group">
         <ng-template let-item="item">
             <Label [text]="item.serial_number"
              class="list-group-item"></Label>
             <ng-template *ngFor="let subItem of item?.sensors">
                  <Label [text]="subItem.serial"
                      class="list-group-item"></Label>
             </ng-template>
         </ng-template>
    </ListView>
</StackLayout>

如果您不想使用ngFor，请使用let-subItem="item?.sensors"。

这可以帮助您！！

如何在Nativescript中显示Json数据

1 个答案: