![](/img/trans.png)
[英]mat-checkbox does not check if condition is false (only on double click)
[英]mat-checkbox check only if condition is true
我有一个带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
我在html中使用了ngModel
上的事件绑定,还修改了ngModel
中的一些代码。 现在只能选中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;
}
}
}
这是一个有效的链接
我是stackoverflow的新手。你可以尝试更改事件。
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
复选框
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.