Как я могу показать с * ngIf только 1 раз элементы массива, которые имеют одинаковое значение?

Question

У меня есть 2d массив. Пример:

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>