[英]I an trying to disable and enable checkbox based on value in angular 8
Here is my code这是我的代码
I am having List Array like: this is getCall.我有类似的列表数组:这是getCall。 ktsessions = [ {"presenter":"Bharath","topic":"Angular","status":"scheduled","emailId":"bharathkumar@gmail.com"}, {"presenter":"Sayyad","topic":"Angular","status":"organized","emailId":"raheemsayyad@gmail.com"},{"presenter":"Kanchan","topic":"APS","status":"scheduled","emailId":"kanchanubey@gmail.com"} ];
ktsessions = [ {"presenter":"Bharath","topic":"Angular","status":"scheduled","emailId":"bharathkumar@gmail.com"}, {"presenter":"Sayyad", "topic":"Angular","status":"organized","emailId":"raheemsayyad@gmail.com"},{"presenter":"Kanchan","topic":"APS","status": "预定","emailId":"kanchanubey@gmail.com"} ];
<tr *ngFor = "let ktsession of ktsessions >
<td ><input type="checkbox" [disabled]='disabled'></td>
</tr>
TS code: TS代码:
getktsession(){
this.service.getKtsession().subscribe(data =>{
console.log('get', data);
this.ktsessions = data;
this.ktsessions.find(user => {
if(user.presenter ==="Kanchan"){
this.disabled = true
} else {
this.disabled = false;
}
});
});
}
There are several issues here.这里有几个问题。
<tr *ngFor = "let ktsession of ktsessions >
- Missing closing quote after ktsessions
<tr *ngFor = "let ktsession of ktsessions >
- ktsessions
后缺少结束引号<td ><input type="checkbox" [disabled]='disabled'></td>
- [disabled]='disabled'
should be [disabled]="ktsession.disabled"
. <td ><input type="checkbox" [disabled]='disabled'></td>
- [disabled]='disabled'
应该是[disabled]="ktsession.disabled"
。 Each checkbox instance needs to have its own disabled
property.disabled
属性。 [disabled]='disabled'
sets each checkbox's disabled
property to the disabled
property of the component class instance rather than the checkbox instance. [disabled]='disabled'
将每个复选框的disabled
属性设置为组件类实例的disabled
属性,而不是复选框实例。this.ktsessions.find(user => {
- Array#find is not an appropriate method to use here, even though it happens to work since you're not returning anything from the callback function and it will therefore iterate the entire array. Array#find is for searching an array for an element that matches the specified criteria and returning that element, not for iterating over an array and setting properties on each element, which is what you're doing here. Array#forEach is the appropriate method for that. this.ktsessions.find(user => {
- Array#find不是在这里使用的合适方法,即使它碰巧可以工作,因为您没有从回调函数返回任何内容,因此它将迭代整个数组。数组#find 用于在数组中搜索与指定条件匹配的元素并返回该元素,而不是用于迭代数组并在每个元素上设置属性,这就是您在这里所做的。Array#forEach是适当的方法那。this.disabled = true
and this.disabled = false
- these are setting the disabled
property on the component class instance (which is what this
refers to), but what you need to do is set the disabled
property on each user
instance: user.disabled = true
or user.disabled = false
. this.disabled = true
和this.disabled = false
- 这些是在组件类实例上设置disabled
属性(这是this
所指的),但是您需要做的是在每个user
实例上设置disabled
属性user.disabled = true
或user.disabled = false
。 So your template should look something like this:所以你的模板应该是这样的:
<tr *ngFor="let ktsession of ktsessions">
<td>
<input type="checkbox" [disabled]="ktsession.disabled" /> <!-- reference "ktsession.disabled" instead of "disabled" -->
{{ ktsession.presenter }}
</td>
</tr>
And your subscribe
should look something like this:你的
subscribe
应该是这样的:
this.getKtsession().subscribe((data) => {
this.ktsessions = data;
this.ktsessions.forEach((user) => { // <-- use forEach, not find
if (user.presenter === 'Kanchan') {
user.disabled = true; // <------------ set user.disabled, not this.disabled
} else {
user.disabled = false; // <----------- set user.disabled, not this.disabled
}
});
});
Here's a StackBlitz showing it working with those changes. 这是一个 StackBlitz展示它如何处理这些变化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.