angular - 如何使用 angular-material 5 复选框

Question

我想取消选中框并禁用该按钮，该按钮仅在第一次打开时才有效。

这是我的模板：

<form>
    <div class="container">
        <div *ngFor="let row of interpreterLists; index as i"
        class="row">
            <div>
                <mat-checkbox type="checkbox"
                [value]="row.id"
                name="{{row.name}}  {{ row.lastname }} ({{ row.work_inprogress }}/{{ row.work_success }})"
                (chang)="onChange()"
                [(ngModel)]="selectedInterpreter[i]"
                #shoes>
                    {{row.name}}
                    {{ row.lastname }}({{row.work_inprogress
                    }}/{{
                    row.work_success }})
                </mat-checkbox>
            </div>
        </div>
    </div>
</form>

<button mat-raised-button class="btn btn-success md-warn"
(click)="assignJob(documentDetail.id)"
[disabled]="selectedInterpreter.length == 0">
    <i class="material-icons">check</i>&nbsp;<span class="mat-button-wrapper">สั่งงาน&lt;/span>
</button>

这是我的组件

getInterpreters(department_id, doc_id) {
    let params = {
      department_id: department_id,
      doc_id: doc_id
    }
    this.userService.getInterpreters(params, 'Bearer ' + this.token).subscribe(res => {
      if (res) {
        this.interpreterLists = res;
        this.selectedInterpreter = [];

        for (let i = 0; i < this.interpreterLists.length; i++) {
          if (this.interpreterLists[i].readyexist === 'Yes') {

            this.selectedInterpreter.forEach(item => {
              item.checked = false;//change as per your requirement
            });
            this.selectedInterpreter.push(this.interpreterLists[i].id);
          }
        }
        console.log('dhduchd', this.selectedInterpreter);
      } else {
        this.selectedInterpreter.forEach(item => {
          item.disabled = true;//change as per your requirement
        });
        console.log('fail: ');
      }
    })
  }

这是网页

标签： angulartypescriptangular-material-5