Angular5 需要功能来选中/取消选中 mat-table 内的 mat-checkbox [英] Angular5 Need function to check/uncheck mat-checkbox inside mat-table
问题描述
我可以获取表格中的复选框以在选中/取消选中时发出更改,但是在单击地图图钉切换复选框状态时,我遇到了往复问题.
I can get checkboxes within the table to emit changes on check/uncheck, but am having troubles reciprocating when clicking on map pins to toggle checkbox states.
这是我的桌子:
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="number">
<mat-header-cell *matHeaderCellDef> Number </mat-header-cell>
<mat-cell *matCellDef="let stock">
// #myCheckbox needs to be unique
<mat-checkbox #myCheckbox [checked] (change)="selectStock(stock, $event)"></mat-checkbox> <a href="">{{ stock.number }}</a>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="clickRow(row._id,$event)"></mat-row>
</mat-table>
然后从我的地图上,当你点击一个图钉时,运行一些功能
Then from my map, when you click on a pin, run some function
(click)="someFunction(myCheckbox)"
在我的班级
@ViewChild('myCheckbox') private myCheckbox: MatCheckbox;
someFunction(myCheckbox){
if (stock.isChecked) {
this.myCheckbox.checked = false;
} else {
this.myCheckbox.checked = true;
}
}
这是我正在处理的示例,但它对每个复选框应用相同的 #id,因此只有第一个复选框被切换(我假设每个复选框都需要唯一的唯一 ID?)
This is the example I'm working off of but it's applying the same #id to each checkbox so only the first checkbox gets toggled (I'm assuming I need unique a unique id for each checkbox?)
推荐答案
在网站上进行更多搜索后,我能够使用 ViewChildren 解决问题
After more searching on the site, I was able to fix the issue using ViewChildren
@ViewChildren('myCheckbox') private myCheckboxes : QueryList<any>;
someFunction(item, index){
let myCheckboxes = this.myCheckboxes.toArray();
if (item.isChecked) {
myCheckboxes[index].checked = true;
} else {
myCheckboxes[index].checked = false;
}
}
好东西
这篇关于Angular5 需要功能来选中/取消选中 mat-table 内的 mat-checkbox的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!