Question

我正在尝试在/如果获得所选属性时动态设置MatChips的bg颜色。我有一个可用选项列表，对所有用户而言都是相同的（由stackblitz示例的app.component中的“ chiplists”表示），以及一个用户选择的芯片列表（即“ selected”）。这两个列表在我的应用程序中都是动态的。到目前为止，我有：

<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类，因为将来颜色可能会改变

下面的stackblitz链接演示了此行为，错误记录在控制台中：

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

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

请注意，尽管有错误，但stackblitz示例仍在按预期方式工作，但无论是否选择，我的应用程序都不会为芯片着色。

编辑：我的应用的角度和材质版本与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>

我在Mat芯片列表中添加了一个名为my-chip的类，以对其进行标识，并以下面的子元素为目标。

希望它可以解决您的问题

干杯！

动态设置选定材质芯片的bg-color会导致ExpressionChangedAfterItHaHasBeenCheckedError

1 个答案: