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

Question

这是我的代码

我有类似的列表数组：这是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": "预定","emailId":"kanchanubey@gmail.com"} ];

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

Answer 1

这里有几个问题。

1. <tr *ngFor = "let ktsession of ktsessions > - ktsessions后缺少结束引号
2. <td ><input type="checkbox" [disabled]='disabled'></td> - [disabled]='disabled'应该是[disabled]="ktsession.disabled" 。 每个复选框实例都需要有自己的disabled属性。 [disabled]='disabled'将每个复选框的disabled属性设置为组件类实例的disabled属性，而不是复选框实例。
3. this.ktsessions.find(user => { - Array#find不是在这里使用的合适方法，即使它碰巧可以工作，因为您没有从回调函数返回任何内容，因此它将迭代整个数组。数组#find 用于在数组中搜索与指定条件匹配的元素并返回该元素，而不是用于迭代数组并在每个元素上设置属性，这就是您在这里所做的。Array#forEach是适当的方法那。
4. 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
    }
  });
});

这是一个 StackBlitz展示它如何处理这些变化。