如何仅使用 *ngIf 显示具有相同值的数组的 1 个时间项？

Question

我有一个二维数组。示例：

weatherForecast = [
  [Weather(Monday, 10C, 11:00), (Weather(Monday, 12:00)],
  [Weather(Tuesday, 10C, 11:00),(Weather(Tuesday, 12:00)]
];

如果值相同，我如何每天打印一次。代码：

<ion-item>
  <ion-grid>
    <ion-row *ngFor="let forecast of weatherForecast; let i = index">
      <ion-col *ngFor="let weatherData of forecast; let j = index">
        <div *ngIf="weatherData[j].day !== forecast[j - 1].day">
          {{ forecast[j].day }}
        </div>
      </ion-col>
      <ion-col *ngFor="let weatherData of forecast; let j = index">
        <div>
          {{ forecast[j].temperature }}
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-item>

Answer 1

如果我正确理解您想要实现的目标，这应该可行，

let aux;
let filterForecast = [];
for (let i = 0; i < weatherForecast.length; i++) {
  aux = {};
  for (let j = 0; j < weatherForecast[i].length; j++) {
    if (!aux.hasOwnProperty(weatherForecast[i][j].day)) {
      aux[weatherForecast[i][j].day] = weatherForecast[i][j];
    }
  }
  filterForecast.push(Object.values(aux));
}

我使用了一个非常简单的代码，您必须根据自己的代码进行调整。这种方法解决了代码而不是模板中的问题。我只是使用字典来保存不同的日期，然后将字典的值添加到结果中。有了这个，你将不得不使用 filterForecast 而不是模板中的weatherForecast。

假设内部数组是按天排序的，那么就使用*ngIf，

<ion-item>
  <ion-grid>
    <ion-row *ngFor="let forecast of weatherForecast; let i = index">
      <ion-col *ngFor="let weatherData of forecast; let j = index">
        <div *ngIf="j === 0 || weatherData.day !== forecast[j - 1].day">
          {{ weatherData.day }}
        </div>
      </ion-col>
      <ion-col *ngFor="let weatherData of forecast; let j = index">
        <!-- I am not sure if you need to check here too -->
        <div>
          {{ weatherData.temperature }}
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-item>