带条件的角ngClass

Question

我是从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”

Answer 1

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来显示行状态一次。任何方式，检查我之前的回答，我希望对你有帮助