我是从JSON文件而不是数据库获取数据。我试图根据JSON中的状态值为图标赋色,例如[if green?class1:class2]下面是我的代码。
我的HTML文件
<ng-container matColumnDef="status" [ngClass] = "{'color1': row.status ===
'GREEN', 'color2': row.status === 'RED'}">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
<td mat-cell *matCellDef="let row" class="color1">{{row.status}}</td>
<td mat-cell *matCellDef="let row" class="color2">{{row.status}}</td>
</ng-container>
下面是我的JSON文件。
data:[
{
"name": "xyz",
"address": "post",
"status": "GREEN"
},
{
"name": "xyz1",
"address": "post1",
"status": "RED"
}
],
"count" : 2
}
这是我的CSS
.color1{
color: green;
}
.color2{
color: red;
}
**我无法更改状态图标的颜色。我得到了这个错误**
错误类型错误:无法读取未定义的属性“status”
ngClass接收对象键-值,键可能是无类的,而值是应用键的条件
您可以使用静态检查每个可能的类值,如下所示。
<td mat-cell *matCellDef="let row" class="color1"
[ngClass]="{
'green': row.status === 'GREEN',
'red': row.status === 'GREEN'">{{row.status}}</td>
相同想法的其他选择
<td mat-cell *matCellDef="let row"
[class.red] = "row.status === 'RED'"
[class.green] = "row.status === 'GREEN'" >
{{row.status}}
</td>
另一种方法是使用map objetc在您的ts中定义类,并从html中访问一次,比如这个typescript文件
mapClass = {
'GREEN': 'green',
'RED': 'red'
}
和html
<td mat-cell *matCellDef="let row" class="{{mapClass[row.status]}}">{{row.status}}</td>
最后一种方法更好,如果可能的类值发生了变化,使用mapClass只需添加新的可能值,并定义css类,html保持不变。
编辑:我认为你编辑你的原始问题,我回答那个原始问题。您当前的错误在我看来是因为您正在尝试将ngCLass与ngcontainer一起使用,尝试在TD中使用ngCLass。我看到你显示双td在容器内不同的类,没有NGIF。如果我理解rigth,那么使用这种方式您应该使用ngIf来显示行状态一次。任何方式,检查我之前的回答,我希望对你有帮助