angular mat table 行上的 ngClass

Question

我想使用 angular select 的 select 选项来更改 css-class 特定行的 angular material table.

我的 selection 工作得很好，我可以给 select 上的星球一个“selected=true” 属性。（所有其他设置为假）。现在我想更改特定行的 css-class （红色边框），其中对象具有“selected” 属性 = true.

我的 html 看起来像这样：

<table mat-table [dataSource]="planets" [trackBy]="trackById" class="mat-elevation-z8" id="planetList">

//所有ng容器

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row [ngClass]="{'selectedPlanet': planet.selected === 'true'}" *matRowDef="let row; columns: displayedColumns;"></tr>

css:

.selectedPlanet {border-color: red;}

但我遇到了问题，我的控制台抛出错误，类似于“ctx_r7.planet 未定义”。我不知道如何在垫子 table 上使用 ngClass 来更改行。有谁知道我该如何解决这个问题？

Answer 1

您可以使用安全导航运算符？在 Angular 模板中确保不会出现此类错误（在读取可能 undefined/null 的对象属性时）：

将您的代码更改为：

[ngClass]="{'selectedPlanet': planet?.selected === 'true'}"

理想情况下，我们应该确保依赖于某个对象的模板代码应该在对象可用时呈现，通常使用 *ngIf 指令。

Answer 2

您的星球未定义，您需要安全导航。

<tr mat-row [ngClass]="{'selectedPlanet': planet?.selected === 'true'}" *matRowDef="let row; columns: displayedColumns;"></tr>

您没有定义行星我假设输入行已选择属性所以使用行属性访问任何属性

<tr mat-row [ngClass]="{'selectedPlanet': row?.selected === 'true'}" *matRowDef="let row; columns: displayedColumns;"></tr>

angular mat table 行上的 ngClass

ngClass on an angular mat table row

html

css

typescript

angular

mat-table