angular - ngFor 的离子 GET 对象索引

Question

我有以下 JSON 数据。我能够在 js 文件中提取它，并且能够通过 console.log 进行登录。但是，我无法正确显示数据。

我试图在 stackoverflow 上进行搜索，但找不到正确的选项并想寻求帮助。

{
    "service": "weather",
    "daily": {
        "summary": "Light rain tomorrow and Friday.",
        "icon": "rain",
        "data": [
            {
                "time": 1581436800,
                "summary": "Humid and partly cloudy throughout the day."
            },
            {
                "time": 1581523200,
                "summary": "Light rain in the morning and afternoon."
            },
            {
                "time": 1581609600,
                "summary": "Possible drizzle in the morning."
            },
            {
                "time": 1581696000,
                "summary": "Humid and partly cloudy throughout the day."
            },
            {
                "time": 1581782400,
                "summary": "Humid throughout the day."
            },
            {
                "time": 1581868800,
                "summary": "Humid and partly cloudy throughout the day."
            },
            {
                "time": 1581955200,
                "summary": "Humid and partly cloudy throughout the day."
            },
            {
                "time": 1582041600,
                "summary": "Humid throughout the day."
            }
        ]
    }
}

带有两个文件供检索和显示。

天气.page.ts

constructor(private http: HTTP) {
    this.http.get('http://localhost:8080/weather', {}, {})
      .then(data => {

        const parsedBody = JSON.parse(data.data)
        this.dailyData = parsedBody.daily.data

        console.log("this.dailyData:");
        console.log(this.dailyData);

      })
      .catch(error => {
          // ...
      });
    }

天气.page.html

<ion-item *ngFor="let data of dailyData">
 <ion-label>
    <h2>Tomorrow</h2>
    <p>{{data[0].summary}}</p>
 </ion-label>
</ion-item> 

{{数据[0].summary}}

标签： angularcordovaionic-framework

Answer 1

在 *ngFor 中使用异步管道

<ion-item *ngFor="let data of dailyData |async ">
 <ion-label>
    <h2>Tomorrow</h2>
    <p>{{data[0].summary}}</p>
 </ion-label>
</ion-item>