Как вы показываете массив JSON в ionic, используя * ng-For, когда ключи являются целочисленными строками? - PullRequest
Новая
       43

Как вы показываете массив JSON в ionic, используя * ng-For, когда ключи являются целочисленными строками?

2 голосов
/ 18 апреля 2019

Я использую ionic 4 и пытаюсь получить массив JSON с использованием TransportAPI через http.get, однако они используют целочисленные строки в качестве ключа для объектов, которые я пытаюсь получить, а затем несколько массивы для каждого объекта, например так: 

{
    "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 (отсутствует импорт, компонент и т. Д. Для экономии места: 

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();
  }

}

1 Ответ

2 голосов
/ 18 апреля 2019

Если это данные, которые вы хотите перебрать, вам нужно использовать канал значения ключа, так как это объект. * 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>

Документация по ключевому значению .

Справочник по отображению данных Angular .

...