当键是整数字符串时，如何使用 *ng-For 在离子中显示 JSON 数组？

Question

我正在使用 ionic 4，我正在尝试通过 http.get 使用 TransportAPI 获取 JSON 数组，但是，它们使用整数字符串作为我正在尝试的对象的键得到，然后每个对象有多个数组，像这样：

{
    "departures": {
        "25": [
            {
                "mode": "bus",
                "line": "25",
                "departure_time": "12:40"
            },
            {
                "mode": "bus",
                "line": "25",
                "departure_time": "13:00",
            }
        ],
        "50": [
            {
                "mode": "bus",
                "line": "50",
                "departure_time": "12:46",
            },
            {
                "mode": "bus",
                "line": "50",
                "departure_time": null,
            },
            {
                "mode": "bus",
                "line": "50",
                "departure_time": "14:46",
            }
        ]
    }
}

这个 JSON 数组存储在 "testArray: any;" 中，实际获取它没有问题，因为我可以将它打印到控制台日志中。几个小时后我才发现你 必须将数字键放入括号符号 即。 ["25"] 来访问那些，但是我不确定在使用 *ngFor 时如何去做，或者即使你愿意。这是我要输出的粗略代码：

<div *ngFor="let bus of testArray.departures"> //this is where I'm not too sure

    <ion-item-divider>
        <ion-label> bus line: {{ bus.line }}</ion-label>
    </ion-item-divider>

    <ion-item *ngFor="let time of bus"> //no idea what I'm doing here either
        {{ time.departure_time }}
    </ion-item>
</div>

如有任何帮助，我们将不胜感激！

编辑：这是我用来获取 JSON 文件的代码（缺少导入和组件等以保存 space:

export class BusesPage implements OnInit {
  testArray: any;

  constructor(private http: HttpClient) {}

  fillTestArray(){
      this.http.get('assets/test.JSON').subscribe(data => {
          this.testArray = data;
          console.log(this.testArray);
      });
  }

  ngOnInit() {
      this.fillTestArray();
  }

}

Answer 1

如果这是您希望遍历的数据，您需要使用键值管道，因为这是一个对象。没有的 *ngFor 用于遍历数组。这将让您遍历对象。

然后您可以在没有键值管道的情况下遍历嵌套在对象内的数组。应该显示你想要的数据。

<div *ngIf="testArray">  // checks testArray exists
    <div *ngFor="let bus of testArray.departures | keyvalue">
        <div *ngFor="let data of bus.value">
            <ion-item-divider>
                <ion-label> bus line: {{ data.mode }}</ion-label>
                <ion-label> bus line: {{ data.line }}</ion-label>
                <ion-label> bus line: {{ data.departure_time }}</ion-label>
            </ion-item-divider>
        </div>
    </div>
</div>

keyvalue pipe docs.

Angular's displaying data guide.

当键是整数字符串时，如何使用 *ng-For 在离子中显示 JSON 数组？

How do you show JSON array in ionic using *ng-For when the keys are integer strings?

html

json

angular

ionic4

ngfor