我試圖根據角度 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展示它如何處理這些變化。