如何在 ngFor Angular 5 中绘制不同的行答案

【问题标题】：How to paint the different rows in ngFor Angular 5如何在 ngFor Angular 5 中绘制不同的行
【发布时间】：2018-05-07 22:09:35
【问题描述】：

我正在创建一个表，其中包含从*ngFor 加载的一些行：

    <tr *ngFor="let car of cars">
      <td>{{car?.id}}</td>
      <td>{{car?.date | date : "short"}}</td>
      <div [ngSwitch]="car?.state">
          <td *ngSwitchCase=1 class="col">Sold</td>
          <td *ngSwitchCase=7 class="col">Repaired</td>
          <td *ngSwitchDefault class="col">Out of stock</td>
      </div>
    </tr>

我希望每一行都涂上不同的颜色，这取决于汽车的状态。我知道如何处理静态内容，但如果它来自数据库则不知道，我必须使用 *ngFor 指令加载它。

当我使用引导程序时，我想对状态 1 使用类样式 .table-success，对状态 7 使用 .table-info，默认使用 primary。

<tr class="table-success">

【问题讨论】：

标签： angular html-table bootstrap-4 angular5 ngfor

【解决方案1】：

首先，<tr> 中的 <div> 不起作用，<ng-container> 将满足您的需求。这是一个仅在 Angular 编译器中使用的特殊标记，它将转换为 HTML 注释。

除此之外，您的*ngSwitchCase 缺少一些双引号。

关于类，您可以使用[class.class-name] 绑定或[ngClass]，如果您认为这样更有条理：

<tr *ngFor="let car of cars" class="table-primary" 
    [class.table-success]="car.state === 1"  [class.table-info]="car.state === 7">
  <td>{{car?.id}}</td>
  <td>{{car?.date | date : "short"}}</td>
  <ng-container [ngSwitch]="car?.state">
      <td *ngSwitchCase="1" class="col">Sold</td>
      <td *ngSwitchCase="7" class="col">Repaired</td>
      <td *ngSwitchDefault class="col">Out of stock</td>
  </ng-container>
</tr>

【讨论】：

这正是我想要的。非常感谢！

【解决方案2】：

使用可能的汽车状态名称编写符合您要求的样式。

让我们来。如果你得到汽车状态交付。

然后写

.delivered{
  background: green,
  color: black
 }

<tr [ngClass]="{{car.status}}" *ngFor="let car of cars">
  <td>{{car?.id}}</td>
  <td>{{car?.date | date : "short"}}</td>
  <div [ngSwitch]="car?.state">
      <td *ngSwitchCase=1 class="col">Sold</td>
      <td *ngSwitchCase=7 class="col">Repaired</td>
      <td *ngSwitchDefault class="col">Out of stock</td>
  </div>
</tr>

【讨论】：

【解决方案3】：

您可以使用ngClass。在表格行中：

<tr [ngClass]="{'table-success': (car?.state=='1'), 'table-info': (car?.state=='7'), 'primary': (car?.state=='7' && car?.state=='1')}" *ngFor="let car of cars">

【讨论】：

【解决方案4】：

您可能想要使用ngClass 指令：

[ngClass]="{'table-success' : car.state == 1}"

由于您有多个选项并且可能有点难以阅读，您可以在组件 .ts 文件中添加一个方法

[ngClass]="getClasses(value)"

并创建一个 getClasses 方法，该方法返回项目的正确类。

但最后，如果你已经有一个开关，为什么不这样做：

 <td *ngSwitchCase="1" class=".table-success col">Sold</td>
 <td *ngSwitchCase="7" class=".table-info col">Repaired</td>
 <td *ngSwitchDefault class="col">Out of stock</td>

将类添加到您已有的开关中：)

【讨论】：