Strukturelle Gleichheitswächter für OnPush Change Detection mit Array-Schnappschüssen

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
interface Row { id: string; score: number; }
 
function shallowRowsEqual(a: readonly Row[], b: readonly Row[]): boolean {
  if (a === b) return true;
  if (a.length !== b.length) return false;
  for (let i = 0; i < a.length; i++) {
    if (a[i].id !== b[i].id || a[i].score !== b[i].score) return false;
  }
  return true;
}
 
@Component({
  selector: 'app-leaderboard',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<div *ngFor="let row of rows; trackBy: trackById">{{ row.id }}: {{ row.score }}</div>`,
})
class LeaderboardComponent {
  private _rows: readonly Row[] = [];
 
  @Input() set rows(next: readonly Row[]) {
    if (!shallowRowsEqual(this._rows, next)) {
      this._rows = next;
    }
  }
  get rows(): readonly Row[] {
    return this._rows;
  }
 
  trackById(_index: number, row: Row): string {
    return row.id;
  }
}