从角度2应用程序

Question

我从openweather api获得一个对象，该对象包含40个对象的数组，天气预报为5天，间隔为3小时。我有问题在我的角度2应用程序中显示这5天的预测。我需要按天过滤这些数据，并在角度模板，显示日期，日期，预测中显示这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>

可能有更优雅的方式，但这应该让你开始。