Javascript 我试图根据Angular 8 中的值禁用和启用复选框

发布于05月25日

这是我的密码

我有这样的列表数组:这是getCall.

<tr *ngFor = "let ktsession of ktsessions >

  <td ><input type="checkbox" [disabled]='disabled'></td>
</tr>

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

推荐答案

这里有几个问题.

<tr *ngFor = "let ktsession of ktsessions >-ktsessions后缺少结束报价
<td ><input type="checkbox" [disabled]='disabled'></td>-[disabled]='disabled'应为[disabled]="ktsession.disabled".每个checkbox实例都需要有自己的disabled属性.[disabled]='disabled'将每个复选框的disabled属性设置为组件类实例的disabled属性，而不是复选框实例的disabled属性.
this.ktsessions.find(user => {-Array#find在这里不是一个合适的方法，尽管它碰巧可以工作，因为您没有从回调函数返回任何内容，因此它将迭代整个array.Array#find用于在数组中搜索与指定条件匹配的元素并返回该元素，而不是迭代数组并设置每个元素的属性，这正是您在这里要做的.Array#forEach是合适的方法.
this.disabled = true和this.disabled = false-这些是在组件类实例上设置disabled属性(这是this所指的)，但您需要做的是在每个user实例上设置disabled属性:user.disabled = true或user.disabled = false.

因此，您的模板应该如下所示:

<tr *ngFor="let ktsession of ktsessions">
  <td>
    <input type="checkbox" [disabled]="ktsession.disabled" /> <!-- reference "ktsession.disabled" instead of "disabled" -->
    {{ ktsession.presenter }}
  </td>
</tr>

你的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显示如何处理这些更改.