条件が真である場合にのみmat-checkboxがチェックされます

Question

私はmat-checkboxのユーザテーブルリストを持っています。 mat-checkboxをクリックすると、チェックボックスは、特定の条件が真である場合にのみチェックされます。

このコードでは、id=2のチェックボックスのみをオンにしようとしています。しかし、最初に2のチェックボックスをクリックすると、確認する必要がある要素の配列に2が追加されてもチェックされません。

一方、チェックボックス1,3 or 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> 

component.ts

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

    } 

} 

の作業コード：https://stackblitz.com/edit/mat-checkbox-conditional

Answer 1

私はHTMLでngModelに結合事象を使用してもapp.component.tsにいくつかのコードを変更しました。これで、id 2のチェックボックスだけがチェックできます。ここでapp.component.html

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

とapp.component.tsで

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

} 

に

以下のコードを参照してくださいすることは作業リンクは

https://stackblitz.com/edit/mat-checkbox-conditional-z8uc94

Answer 2

私はstackoverflow.You以上の初心者だというもののため変更イベントを試すことができます。

component.ts

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

component.html

チェックボックス