Question

这是我获取的<div id="navigation-bar"> <header id="header"> <nav id="nav-bar"> <a href="#">Tab1</a> <a href="#">Tab2</a> <a href="#">Tab3</a> <a href="#">Tab4</a> <a href="#">Tab5</a> <a href="#">Tab6</a> <a href="#">Tab7</a> <a href="#">Tab8</a> </nav> </header> </div>数据：

JSON

我想在{ "trains": [ { "id": "12142", "code": "12125", "name": "D-Some", "codeandname": "Express1OMin_1" }, { "id": "12189", "code": "1217887", "name": "Express2One", "codeandname": "Express2OneKL_Min" }, { "id": "1225896", "code": "23599", "name": "Express235KYTgg", "codeandname": "ExpressTh89554" }, }应用程序中以列表格式显示codeandname。这是我尝试过的：

Ionic

我的<ion-item> <ion-label color="primary" floating>Enter Train No./Name</ion-label> <ion-input type="text" [(ngModel)]="TrainName" (input)="searching($event)" clearInput></ion-input> </ion-item> <ion-list> <ion-item *ngFor="let stations of stationlist" (click)="itemSelected(stations)">{{stations}}</ion-item> </ion-list>文件：

TS

但这不起作用。我该如何实现？任何帮助将非常感激。谢谢！

Answer 1

您正在循环对象，您不能循环对象，尝试这种方式

<ion-item>
            <ion-label color="primary" floating>Enter Train No./Name</ion-label>
            <ion-input type="text" [(ngModel)]="TrainName" (input)="searching($event)" clearInput></ion-input>
          </ion-item>
          <ion-list>
            <ion-item *ngFor="let stations of stationlist.trains" (click)="itemSelected(stations)">{{stations.codeandname}}</ion-item>
          </ion-list>

示例：https://stackblitz.com/edit/angular-vbfjby

Answer 2

这是列出与嵌套数组相关的数据的简单示例

对象数组包含嵌套数组

  public models :any[] = [
    {
      name : 'name 01',
      items: [1,2,3,4,6]
    },
    {
      name : 'name 02',
      items: [55,6,20,4]
    },
    {
      name : 'name 03',
      items: [9,8,9,2,47]
    },
  ]

模板

<div *ngFor="let model of models">
  <div>{{model.name}}</div>
  <div *ngFor="let item of model.items">
    {{item}}
  </div>
</div>

第二个循环，我们迭代器抛出当前迭代model.items中的对象

stackblitz example

Answer 3

看看 JSON 的结构，它是 Object ，其中具有 array 在其中。根据定义，您可以在数组上使用 ngFor 。

因此，您应该更改ngFor以在数组 trains 中使用，该数组位于对象 stationlist 中，

<ion-item *ngFor="let stations of stationlist.trains" (click)="itemSelected(stations)">{{stations}}</ion-item>

DEMO

如何遍历嵌套的Json对象？

3 个答案: