嵌套json的Angular 2 ngFor [英] Angular 2 ngFor for nested json

问题描述

我是新的Angular2.我可以获取Json文件.我能够获取部分json文件，但无法获取json文件中的数组. 例如，我想在第一个UL中可视化GPS设备，在第二个UL中可视化IMU设备.因为它们是数组，所以我在列表中得到了IMU设备的相同数据.

I am new angular 2. I am able to get Json file. I am able to get some part json file but not the array inside json file. For example I want to visualise GPS device in First UL and IMU device in second UL. SInce they are array I am getting same data of IMU device in bOTH the lists.

json文件

"config" : [
    {
        "id"      : "gps_device",
        "name"    : "GPS Device",
        "type"    : "String",
        "widget"  : "dropdown",
        "fields"  : [ "Disabled", "XSensIMU", "GenesysADMA"],
        "default" : "Disabled"
    },
    {
        "id"      : "imu_device",
        "name"    : "IMU Device",
        "type"    : "String",
        "widget"  : "dropdown",
        "fields"  : [ "Disabled1", "XSensIMU1", "GenesysADMA1"],
        "default" : "XSensIMU"
    }
]

//here I should get loop of GPS device array
<h1>Gps Device</h1>
<ul *ngFor="let drop of config[0]">
  <li *ngFor="let sub of drop.fields"> {{sub}}</li>
<ul>
//here array of IMU device

<h1>IMU Device</h1>
<ul *ngFOr="let drop1 of config[1]">
    <li *ngFOr="let sub1 of drop.fields"> {{sub1}}</li>
<ul>

推荐答案

尝试以下代码将您的设备分为2组:

Try this code to separate your devices into 2 groups :

<div *ngFor="let drop of config">
  <ng-container *ngIf="drop.id === 'imu_device'; else gpsBlock">
    <h1>IMU Device</h1>
    <ul>
      <li *ngFOr="let sub1 of drop.fields"> {{sub1}}</li>
    </ul>
  </ng-container>
  <ng-container #gpsBlock>
    <h1>Gps Device</h1>
    <ul>
      <li *ngFOr="let sub1 of drop.fields"> {{sub1}}</li>
    </ul>
  </ng-container>
</div>

您在配置上循环播放，并有条件地在GPS或IMU div中显示设备

You loop on config, and conditionnally display device in GPS or IMU divs

或者，您可以按照以下方式进行操作:

EDIT : Or you can doing it this way :

  <ng-container *ngFor="let drop of configs">
    <h1>{{drop.name}}</h1>
    <ul>
      <li *ngFor="let field of drop.fields">{{field}}</li>
    </ul>
  </ng-container>

这篇关于嵌套json的Angular 2 ngFor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！