Попытка отобразить два массива из API

Question

Я начал изучать машинопись / ioni c и пытаюсь отобразить 2 разных массива из API. Мой машинописный код будет отображать только первый массив this.WeatherData = data.weather;. Я тоже пытаюсь отобразить this.WeatherData = data.main;. Я также включил код массива API. Спасибо за любую помощь, спасибо.

Код API

{
   "coord":{
      "lon":-9.05,
      "lat":53.27
   },
   "weather":[
      {
         "id":801,
         "main":"Clouds",
         "description":"few clouds",
         "icon":"02d"
      }
   ],
   "base":"stations",
   "main":{
      "temp":287.16,
      "feels_like":281.91,
      "temp_min":284.26,
      "temp_max":289.15,
      "pressure":1023,
      "humidity":44
   },
   "visibility":10000,
   "wind":{
      "speed":5.1,
      "deg":250
   },
   "clouds":{
      "all":20
   },
   "dt":1586623534,
   "sys":{
      "type":1,
      "id":1569,
      "country":"IE",
      "sunrise":1586583899,
      "sunset":1586633331
   },
   "timezone":3600,
   "id":2964180,
   "name":"Galway",
   "cod":200
}

HTML стр.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Weather for Galway</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ul>
    <li *ngFor="let data of WeatherData">
      <h3>Outside it is/has: {{data.description}}</h3>
      <h3>Current tempature is: {{data.temp}}</h3>
    </li>
  </ul>
</ion-content>

Машинописный код

import { Component, OnInit } from '@angular/core';
import {WeatherService} from '../Services/weather.service';
@Component({
  selector: 'app-weather',
  templateUrl: './weather.page.html',
  styleUrls: ['./weather.page.scss'],
})
export class WeatherPage implements OnInit {
WeatherData:any=[];
  constructor(private weatherService:WeatherService) { }

  ngOnInit() {
    this.weatherService.getWeatherData().subscribe(
      (data)=>{
        this.WeatherData = data.weather;
        this.WeatherData = data.main;

      }
    );
  }

}

Answer 1

main - это не array, а object.

Если вы хотите l oop через объект , вам нужно использовать keyvalue трубу.

Преобразует объект или карту в массив пар ключ-значение.

@Component({
  template: `<div *ngFor="let item of data | keyvalue">
      {{item.key}} - {{item.value}}
    </div>`
})
export class MyComponent {
  data = { "key": "value", "key2": "value2" };
}