Angular5需要功能来选中/取消选中mat表内的mat复选框

我可以在表格中设置复选框，以在选中/取消选中时发出更改，但在单击贴图插脚以切换复选框状态时，我遇到了问题

这是我的桌子：

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

在我班上

    @ViewChild('myCheckbox') private myCheckbox: MatCheckbox;

    someFunction(myCheckbox){
         if (stock.isChecked) {
            this.myCheckbox.checked = false;
            } else {
            this.myCheckbox.checked = true;
         }
    }        

这是我正在研究的示例，但它将相同的#id应用于每个复选框，因此仅切换第一个复选框（我假设我需要每个复选框的唯一id？）

---

在网站上进行更多搜索后，我能够使用ViewChildren解决这个问题

• @ViewChildren（'myCheckbox'）私有myCheckbox:QueryList；
  someFunction（项、索引）{
  让myCheckboxes=this.myCheckboxes.toArray（）；
  如果（项目已检查）{
  我的复选框[索引]。选中=真；
  }否则{
  MyCheckBox[索引]。选中=false；
  }
  } 
  

---

好东西

下面是一个完整的工作示例。在类实现TypeScript文件中：

import { Component, OnInit, Inject, EventEmitter, Output, OnDestroy, QueryList, ViewChildren } from '@angular/core';

...    

export class YourClassName implements OnInit, OnDestroy {

    ...

    selectables : Array<string> = ['ah','be','ce'];
    @ViewChildren('checkboxMultiple') private checkboxesMultiple : QueryList<any>;

    ...

    selectionChange( event ) : void {

        // get index from template loop or so. In this case the value
        // of the mat-checkbox is an Array with the value as first and
        // the loop index as second entry
        let index = event.source.value[1];
        let checkboxesArray = this.checkboxesMultiple.toArray();
        checkboxesArray[index].checked = false;

        // You could also loop over all checkboxes and check/uncheck
        // them based on your logic
    }
}

import{Component，OnInit，Inject，EventEmitter，Output，ondestory，QueryList，ViewChildren}来自'@angular/core'；
...    
导出类YourClassName实现OnInit、OnDestroy{
...
可选择项：数组=['ah'，'be'，'ce']；
@ViewChildren（'checkboxMultiple'）私有checkboxesMultiple:QueryList；
...
selectionChange（事件）：无效{
//从模板循环中获取索引。在本例中，值
//mat复选框的值是一个数组，其值为first和and
//循环索引作为第二个条目
let index=event.source.value[1]；
让checkboxesArray=this.checkboxesMultiple.toArray（）；
checkboxesArray[index]。选中=false；
//您还可以循环所有复选框并选中/取消选中
//基于你的逻辑
}
}

在模板文件中：

...

<mat-checkbox #checkboxMultiple
        *ngFor="let selectable of selectables; let i = index"
        (change)="selectionChange($event)"
        [value]="[selectable, i]">
        {{ selectable }}&nbsp;&nbsp;
</mat-checkbox>

。。。
{{可选}}

---

我发现您必须使用QueryList对象的toArray（）方法来获取实际的复选框数组。

转到

mycheckbox[index]。checked=item.isChecked，保存一些代码行：）
import { Component, OnInit, Inject, EventEmitter, Output, OnDestroy, QueryList, ViewChildren } from '@angular/core';

...    

export class YourClassName implements OnInit, OnDestroy {

    ...

    selectables : Array<string> = ['ah','be','ce'];
    @ViewChildren('checkboxMultiple') private checkboxesMultiple : QueryList<any>;

    ...

    selectionChange( event ) : void {

        // get index from template loop or so. In this case the value
        // of the mat-checkbox is an Array with the value as first and
        // the loop index as second entry
        let index = event.source.value[1];
        let checkboxesArray = this.checkboxesMultiple.toArray();
        checkboxesArray[index].checked = false;

        // You could also loop over all checkboxes and check/uncheck
        // them based on your logic
    }
}

...

<mat-checkbox #checkboxMultiple
        *ngFor="let selectable of selectables; let i = index"
        (change)="selectionChange($event)"
        [value]="[selectable, i]">
        {{ selectable }}&nbsp;&nbsp;
</mat-checkbox>