Question

我创建了一个表，其中第一列包含一个用于选择其父行的复选框。我试图对表进行样式设置，以便在选中时整行都有蓝色背景。

组件打字稿：

public items = [{ name: 'row 1' }, { name: 'row 2' }, { name: 'etc' }];

组件模板：

<table>
    <tr>
      <th><!-- selector column --></th>
      <th>Item</th>
    </tr>
    <tr *ngFor="let item of items" [ngClass]="{ selected: selector.checked }">
      <td><input #selector type="checkbox"></td>
      <td>{{item.name}}</td>
    </tr>
</table>

组件样式表：

tr.selected {
  background-color: blue;
}

将ngClass绑定到每行中复选框的选中状态似乎至少部分有效。当一个方框为checked时，selected类会在非常明显的延迟后添加到行但。

我相信在更改检测运行之后才会添加该类，并且看起来检查框的行为不会触发更改检测。

我做错了吗？我的组件使用默认的更改检测策略。

Angular 4.1.3

这是一个Plunkr演示：https://plnkr.co/edit/Tj6IU5?p=preview

Answer 1

<ng-container *ngFor="let item of items">
  <tr [ngClass]="{ selected: selector.checked }">
    <td><input #selector type="checkbox"></td>
    <td>{{item.name}}</td>
  </tr>
</ng-container>

或

<tr *ngFor="let item of items; let i=index" [ngClass]="{ selected: inputs[i] }">
  <td><input type="checkbox" (change)="inputs[i] = $event.target.value"></td>
  <td>{{item.name}}</td>
</tr>

...
this.items = ...;
this.inputs = new Array(this.items.length);
this.inputs.fill(false);

将表格行的类绑定到复选框选中状态

1 个答案: