在<ng-container>角内绑定到模板参考变量

时间:2018-09-25 15:07:34

标签: angular angular-template ng-container

我有以下标记:

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

我想实现“全选”功能。

如您所见,我在表标题中有一个条件,即如果标题名称等于某个值,则在该标题上添加一个输入。在表主体中,我还有一个条件,即是否应在该列中添加checkbox

当我在表格标题中选择#chkAll复选框时,希望下面的行中的复选框也被选中。我以为[checked]="chkAll?.checked"上的checkboxes可以解决问题,但不起作用。

Here是我的Stackblitz

2 个答案:

答案 0 :(得分:2)

由于chkAll变量是在单独的模板中定义的(由标头的ngFor循环创建),因此它在表主体的标记中不可用。

您可以在标题复选框的值更改时调用组件方法,以对行中的复选框执行选中/取消选中操作:

<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方法使用QueryList提供的ViewChildren来访问复选框:

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

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

有关演示,请参见this stackblitz

答案 1 :(得分: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