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

Question

我正在创建一个 table，其中有一些行是从 *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 指令加载它。

因为我正在使用 bootstrap，所以我想使用 class 样式。table-状态 1 成功，状态 .table-信息7 和默认的主要。

<tr class="table-success">

Answer 1

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

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

然后写

.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>

Answer 2

您可能想使用 ngClass 指令：

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

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

[ngClass]="getClasses(value)"

并创建一个 getClasses 方法，该方法 returns 适合该项目的 class。

但最后，如果您已经有了一个开关，为什么不直接这样做呢：

 <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>

将 classes 添加到您已有的开关中:)

Answer 3

首先，<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>

Answer 4

您可以使用 ngClass。在 table 行中：

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

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

How to paint the different rows in ngFor Angular 5

html-table

bootstrap-4

ngfor

angular

angular5