Как программно изменить цвет мат-чипов в списке мат-чипов?

Question

Я использую мат-чипы для фильтрации таблицы, и все, кажется, работает просто отлично:

home.html

<mat-chip-list>
   <mat-chip (click)="onSectorChipSelect(sector)" [color]="chipColor(sector)" *ngFor="let sector of sectors" selected>{{sector}}</mat-chip>
   <mat-chip (click)="clearSectors()">
     Clear 
   </mat-chip>
</mat-chip-list>

home.ts добавление секторов в список с именем FilterSectors, содержащий одновременно все выбранные сектора.

onSectorChipSelect(sector: string) {
 if (this.filteredSectors.includes(sector)) {
  this.filteredSectors.splice(this.filteredSectors.indexOf(sector), 1);
 } else {
  this.filteredSectors.push(sector);
 }
}

home.ts этот метод окрашивает микросхему в синий цвет (основной), если он выбран, в противном случае он остается белым (основной).

chipColor(sector: string) {
  if (this.filteredSectors.includes(sector)) {
    return 'primary';
  }
  return 'basic';
}

«проблема» заключается в том, что метод chipColor () привязан к атрибуту цвета микросхемы и поэтому вызывается несколько раз при прокрутке или щелчке в домашнем компоненте. Я предполагаю, что каждый раз, когда браузер рендерит, метод вызывается снова? (я не знаю, может, кто-то может объяснить?)

Есть около 20 секторов, так что это не проблема производительности, я думаю? Это просто раздражает, когда я знаю, и это не очень хорошая практика, я думаю. Но как я могу это изменить?

Пока я пытался установить цвет каждого чипа на белый (базовый):

home.html

<mat-chip (click)="onSectorChipSelect(sector)" color="basic" *ngFor="let sector of sectors" selected>{{sector}}</mat-chip>

home.ts

  @ViewChild(MatChipList) chipList: MatChipList;

Получение chipList с аннотацией ViewChild, а затем перебор чипов и установка их цвета, но это не работает. После выбора второго чипа первый чип снова приобретает белый цвет.

onSectorChipSelect(sector: string) {
    if (this.filteredSectors.includes(sector)) {
      this.filteredSectors.splice(this.filteredSectors.indexOf(sector), 1);
    } else {
      this.filteredSectors.push(sector);
    }

    this.chipList.chips.forEach(chip => {
      if(this.filteredSectors.includes(chip.value)) {
        chip.selected = true;
        chip.color = 'primary';
      } else {
        chip.selected = false;
        chip.color = null;
      }
    });
}