代码之家 › 专栏 › 技术社区 › monstertjie_za

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

ng-container angular-template angular

2

monstertjie_za · 技术社区 · 7 年前

我有以下标记:

<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 回复 | 直到 7 年前

1

2

ConnorsFan 7 年前

自从 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 一个演示。

2

Farasi78 7 年前

另一种方法是:

在模板中:

<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