绑定到 <ng-container> angular 内的模板引用变量

Question

我有以下标记：

<table>
  <thead>
    <th *ngFor="let column of columnNames">
      <ng-container *ngIf="column === 'Column6'; else normalColumns">
        {{column}} <input type="checkbox" #chkAll />
      </ng-container>
      <ng-template #normalColumns>
        {{column}}
      </ng-template>
    </th>
  </thead>
  <tbody>
    <tr>
      <td *ngFor="let model of columnValues">
        <ng-container *ngIf="model === 'Value6'; else normal">
        {{model}} <input type="checkbox" [checked]="chkAll?.checked" />
      </ng-container>
      <ng-template #normal>
        {{model}}
      </ng-template>
      </td>
    </tr>
  </tbody>
</table>

我想实现一个 "Select All" 功能。

如您所见，我在 table header 中设置了条件，即如果 header 名称等于某个值，则在该 header。在tablebody里面，我也有一个条件，要不要加一个checkbox。

当我 select table header 中的 #chkAll 复选框时，我希望下面各行中的复选框也为 select编辑。我认为 checkboxes 上的 [checked]="chkAll?.checked" 可以解决问题，但它不起作用。

Here 是我的 Stackblitz

Answer 1

由于 chkAll 变量是在单独的模板中定义的（由 header 的 ngFor 循环创建），因此它在 [=30 的标记中不可用=] body.

您可以在 header 复选框值更改时调用组件方法，以执行行中复选框的 check/uncheck：

<table>
  <thead>
    <th *ngFor="let column of columnNames">
      <ng-container *ngIf="column === 'Column6'; else normalColumns">
        {{column}} <input type="checkbox" ngModel (ngModelChange)="checkAllBoxes($event)" />
      </ng-container>
      ...
    </th>
  </thead>
  <tbody>
    <tr>
      <td *ngFor="let model of columnValues">
        <ng-container *ngIf="model === 'Value6'; else normal">
          {{model}} <input type="checkbox" #chkBox />
        </ng-container>
        ...
      </td>
    </tr>
  </tbody>
</table>

checkAllBoxes 方法使用 ViewChildren 提供的 QueryList 来访问复选框：

@ViewChildren("chkBox") private chkBoxes: QueryList<ElementRef>;

checkAllBoxes(value: boolean) {
  this.chkBoxes.forEach(chk => {
    chk.nativeElement.checked = value;
  });
}

有关演示，请参阅 this stackblitz。

Answer 2

另一种方法如下：

在您的模板中：

<table>
  <thead>
    <th *ngFor="let column of columnNames">
      <ng-container *ngIf="column === 'Column6'; else normalColumns">
        {{column}} <input type="checkbox" #chkAll ngModel (change)="checkAll = chkAll.checked" />
      </ng-container>
      <ng-template #normalColumns>
        {{column}}
      </ng-template>
    </th>
  </thead>
  <tbody>
    <tr>
      <td *ngFor="let model of columnValues">
        <ng-container >
        {{model}} <input type="checkbox" [(checked)]="checkAll" />
      </ng-container>
      <ng-template #normal>
        {{model}}
      </ng-template>
      </td>
    </tr>
  </tbody>
</table>

在你的组件中：

创建一个名为 checkAll 的布尔值。

这里Stackblitz

绑定到 <ng-container> angular 内的模板引用变量

Bind to Template Reference Variable inside <ng-container> angular

angular

angular-template

ng-container