[英]Bind to Template Reference Variable inside <ng-container> angular
I have the following markup: 我有以下标记:
<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>
I would like to implement a "Select All" feature. 我想实现“全选”功能。
As you can see, I have the condition in the table header, that if the header name is equal to a certain value, add an input on that header. 如您所见,我在表标题中有一个条件,即如果标题名称等于某个值,则在该标题上添加一个输入。 In the table body, I also have a condition, on whether there should be added an checkbox
to the column or not. 在表主体中,我还有一个条件,即是否应在该列中添加一个checkbox
。
When I select the #chkAll
checkbox in the table header, I would like the checkboxes in the rows below, to also be selected. 当我在表格标题中选择#chkAll
复选框时,希望以下行中的复选框也被选中。 I thought that [checked]="chkAll?.checked"
on the checkboxes
would do the trick, but it does not work. 我认为checkboxes
上的[checked]="chkAll?.checked"
可以解决问题,但不起作用。
Since the chkAll
variable is defined in a separate template (created by the ngFor
loop of the header), it is not available in the markup of the table body. 由于chkAll
变量是在单独的模板中定义的(由标头的ngFor
循环创建),因此在表主体的标记中不可用。
You can call a component method when the header checkbox value changes, to perform the check/uncheck of the checkboxes in the rows: 您可以在标题复选框的值更改时调用组件方法,以对行中的复选框执行选中/取消选中操作:
<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>
The checkAllBoxes
method uses the QueryList
provided by ViewChildren
to access the checkboxes: checkAllBoxes
方法使用QueryList
提供的ViewChildren
来访问复选框:
@ViewChildren("chkBox") private chkBoxes: QueryList<ElementRef>;
checkAllBoxes(value: boolean) {
this.chkBoxes.forEach(chk => {
chk.nativeElement.checked = value;
});
}
See this stackblitz for a demo. 有关演示,请参见此堆叠闪电战 。
Another way to do this is as follows: 执行此操作的另一种方法如下:
In your template: 在您的模板中:
<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>
In your component: 在您的组件中:
Create a boolean called checkAll. 创建一个名为checkAll的布尔值。
Here Stackblitz 在这里Stackblitz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.