[英]mat-checkbox check only if condition is true
I have a user table list with mat-checkbox
. 我有一个带
mat-checkbox
的用户表列表。 When mat-checkbox
is clicked, the checkbox should be checked only if a certain condition is true. 单击
mat-checkbox
,仅当某个条件为真时才应选中该复选框。
Here in this code, I am trying to have checkbox checked only for id=2
. 在此代码中,我试图仅为
id=2
检查复选框。 But as you can see, initially when checkbox of 2
is clicked, it doesn't get checked even though 2
is added to array of elements which should be checked. 但正如您所看到的,最初单击
2
复选框时,即使将2
添加到应检查的元素数组,也不会检查它。
On the other hand, when checkbox of 1,3 or 4
is clicked, they get checked. 另一方面,当单击
1,3 or 4
复选框时,将检查它们。
component.html 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 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)
}
}
}
Working code: https://stackblitz.com/edit/mat-checkbox-conditional 工作代码: https : //stackblitz.com/edit/mat-checkbox-conditional
I have used event binding on ngModel
in the html and also modified some code in app.component.ts. 我在html中使用了
ngModel
上的事件绑定,还修改了ngModel
中的一些代码。 Now only the checkbox with id 2 can be checked. 现在只能选中ID为2的复选框。 Please see the code below
请参阅下面的代码
in app.component.html 在app.component.html中
<mat-checkbox (ngModel)="canbeChecked(user.id)" (click)="userSelectClick(user.id)"></mat-checkbox>
and in app.component.ts 在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;
}
}
}
Here is a working link 这是一个有效的链接
https://stackblitz.com/edit/mat-checkbox-conditional-z8uc94 https://stackblitz.com/edit/mat-checkbox-conditional-z8uc94
I'm novice over stackoverflow.You can try change event for that stuff. 我是stackoverflow的新手。你可以尝试更改事件。
component.ts 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 component.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.