Angular 如何循环嵌套的Json对象？

这是我得到的

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

我想在我的

Ionic

应用程序中以列表格式显示

code和name

。 这就是我所尝试的：

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

---

但这并不奏效。我如何做到这一点？任何帮助都将不胜感激。谢谢

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

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

输入列车编号/名称
{{stations.codeandname}

---

示例：

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

对象数组包含嵌套数组

  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.name}
{{item}}

第二个循环是迭代器从当前迭代中抛出对象

model.items

---

看看JSON的结构，它是一个

对象，其中包含
数组
。根据定义，您可以在数组上使用ngFor

因此，您应该将ngFor更改为在对象内的数组上使用

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

{{stations}

检查你的物品可能比问这个问题花费更少的时间。我对这个问题不熟悉。非常感谢你的回答。这真的很有帮助！！
<ion-item *ngFor="let stations of stationlist.trains" (click)="itemSelected(stations)">{{stations}}</ion-item>