Angular 仅当条件为真时才选中mat复选框

我有一个带有

mat复选框的用户表列表

。单击

mat checkbox

时，仅当某个条件为真时才应选中该复选框

在这段代码中，我试图只选中

id=2

的复选框。但正如您所看到的，最初单击

2

的复选框时，它不会被选中，即使

2

被添加到应该被选中的元素数组中

另一方面，当单击

1,3或4

的复选框时，它们会被选中

component.html

<tbody>
    <tr *ngFor="let user of users; let in = index">
            <td>
                <mat-checkbox [ngModel]="canbeChecked(user.id)" (click)="userSelectClick(user.id)"></mat-checkbox>
            </td>
    </tr>
</tbody>

<mat-checkbox (ngModel)="canbeChecked(user.id)" (click)="userSelectClick(user.id)"></mat-checkbox>

---

工作代码：

我是stackoverflow的新手。您可以尝试更改该内容的事件

组件技术

export class AppComponent {

  users = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
  checked: boolean = true
  constructor() { }
  selected: any = [];

  canbeChecked(id): boolean {
    console.log("check " + id)
    console.log(this.selected)
    return this.selected.includes(id);

  }

  userSelectClick(id) {

    if (!this.selected.includes(id)) {
      if (id == 2)
        this.selected.push(id);
      console.log("select " + id)
      console.log(this.selected)
    }
    else {
      this.selected = this.selected.filter(item => item !== id)
    }

  }

}

import { Component } from '@angular/core';


@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
user_checked = false;
  users = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
  checked: boolean = false;
  constructor() { }
  selected: any = [];

  canbeChecked(id): boolean {
    console.log("check " + id)
    console.log(this.selected)
    return this.selected.includes(id);

  }

  userSelectClick(event,id) {
    if (!this.selected.includes(id)) {
      if (id == 2)
        this.selected.push(id);
      console.log("selecrted iDs " + id)
      console.log(this.selected)
    }
    else {
      this.selected = this.selected.filter(item => item !== id)
    }
  }

}

/**
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

export class AppComponent {

  users = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
  checked: boolean = true
  constructor() { }
  selected: any = [];

  canbeChecked(id): boolean {
    console.log(this.selected.includes(id));
    return this.selected.includes(id);
  }

  userSelectClick(id) {

    if (!this.selected.includes(id)) {
      if (id == 2){
         this.selected.push(id);
      }
      else{
         return false;
      }
    }
    else {
      if(id == 2){
        this.selected = [];
      }
      else
       return false;
    }
  }

}

component.html

<tbody>
    <tr *ngFor="let user of users; let in = index">
            <td>
                <mat-checkbox [ngModel]="canbeChecked(user.id)" (click)="userSelectClick(user.id)"></mat-checkbox>
            </td>
    </tr>
</tbody>

<mat-checkbox (ngModel)="canbeChecked(user.id)" (click)="userSelectClick(user.id)"></mat-checkbox>

---

复选框我在html中的

ngModel

上使用了事件绑定，还修改了app.component.ts中的一些代码。现在只能选中id为2的复选框。请参阅下面的代码

在app.component.html中

<tbody>
    <tr *ngFor="let user of users; let in = index">
            <td>
                <mat-checkbox [ngModel]="canbeChecked(user.id)" (click)="userSelectClick(user.id)"></mat-checkbox>
            </td>
    </tr>
</tbody>

<mat-checkbox (ngModel)="canbeChecked(user.id)" (click)="userSelectClick(user.id)"></mat-checkbox>

这里是一个工作链接

---

请查看我的代码。。我在

ngModel

上使用了事件绑定，以便在单击事件时更新它。