Установка bg-цвета выбранного Chip материала динамически вызывает ExpressionChangedAfterItHasBeenCheckedError

Question

Я пытаюсь установить bg-цвет MatChips динамически, когда / если они получают выбранное свойство. У меня есть список доступных опций, который одинаков для всех пользователей (представлен «списками микросхем» в app.component образца stackblitz) и список выбранных пользователем микросхем (то есть «выбранных»). Оба этих списка являются динамическими в моем приложении. То, что у меня пока есть:

<mat-chip #ref="matChip" [selected]="chip.value?.selected
 [ngStyle]="ref.selected && {'background-color': chip.value.color}">
</mat-chip>

но он выдает ExpressionChangedAfterItHasBeenCheckedError для background-color: undefined в качестве начального состояния, что ожидается ?, я полагаю.

Использование [ngClass] - это возможное решение, связывающее пользовательский класс css с классом .mat-chip-selected, но я не могу сгенерировать набор жестко закодированных классов css, так как цвета могут измениться в будущем.

Ссылка на стекаблитц ниже демонстрирует это поведение, ошибка регистрируется в консоли:

https://stackblitz.com/edit/angular-y5kfwc

https://stackblitz.com/edit/angular-anjuyf

Обратите внимание, что пока образец stackblitz работает как задумано, хотя и с ошибкой, мое приложение вообще не окрашивает микросхемы, независимо от того, выбран ли он или нет.

Редактировать. Угловая и материальная версии моего приложения такие же, как у package.json в стековом образце.

Edit2: я добавил вилку, которая лучше демонстрирует, что я преследую. Я не ищу, чтобы устранить ошибку в одиночку. Я хочу добавить цвета к чипам динамически во время рендеринга.

Answer 1

Вы можете удалить эту строку

[ngStyle]="ref.selected && {'background-color': 'black'}"

чтобы изменить цвет выбранного чипа, нацельтесь на него, используя css.

на app.component.css

.my-chip .mat-chip-selected {
  background-color: #000 !important;
  color: #fff;
}

app.component.html

<mat-chip-list class="mat-chip-list-stacked my-chip" *ngFor="let list of lists | keyvalue" multiple>
    <mat-chip #ref="matChip" 
  *ngFor="let chip of list.value | keyvalue"
  (click)="toggle(ref)"
  color="primary"
  [selected]="chip.value.selected">
        {{chip.value.de}}
    </mat-chip>
</mat-chip-list>

Я добавил класс в список микросхем с именем my-chip, чтобы идентифицировать его и нацелиться на подэлемент, который ниже .mat-chip-selected.

надеюсь, что это решит вашу проблему

ура!