javascript - 从 Angular 2 应用程序中的 openweather api 检索数据

Question

我从 openweather api 获取一个对象，该对象包含 40 个对象的数组，其中包含 5 天的天气预报，间隔 3 小时。我在 Angular 2 应用程序中显示这 5 天的天气预报时遇到问题。我需要按天过滤这些数据，并在 Angular 模板中显示这 5 天的预测，显示日期、日期、预测。我附上了从 openweather api 获得的对象的屏幕截图

这是我获取此对象的 ts 文件代码:

 this.weatherService.loadCFiveDay(data.lat, data.lon)
                  .subscribe(data=>{                   

                      data.list.forEach(item => {
      }
}

Answer 1

您可以编写一个管道来按日期循环:

@Pipe({
    name : 'filterByDate',
    pure : false
})

export class FilterByDatePipe implements PipeTransform {
    transform(items : any[], filterDate : number) : any {
        if (!items || !items.length || !filterDate)
            return items;

        return items.filter(item => new Date(item.dt).getDate() === filterDate);
    }
}

然后在你看来，做类似的事情:

<div *ngFor="let filteredDate of myServiceData.list | filterByDate:22">
   <!-- everything here will now be filtered by the date of 22nd, so you can do things like -->
   <p>Today's weather - <span>{{ filteredDate.weather[0].description }}</span></p>
</div>

可能有一种更优雅的方式，但这应该可以帮助您入门。