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

Question

这是我的代码

列表数组，例如：这是GetCall。 ktsessions = [{“主持人”：“ bharath”，“ topic”：“ angular”，“状态”：“计划”，“ emailId”：“ [email＆nbsp; email＆nbsp; protected] ：“ “，”主题“：“ aps”，“状态”：“计划”，“ emailId”：“ [email＆nbsp; prected] ”}];

<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. ＆lt; tr *ngfor =“让ktsessions＆gt;的ktsession-在ktsessions
2. ＆lt; td;禁用] ='disabled'＆gt;＆lt;/td＆gt; - [disabled] ='disabled'应该是 [disabled] =“ ktsession.disabled” 每个复选框实例都需要其自己的禁用>禁用 component类实例的属性而不是复选框实例
3. 。 /en-us/doc/web/javaScript/referent/global_objects/array/gind“ rel =“ nofollow noreferrer”> array＃find 也不是在这里使用的合适方法，即使它恰好起作用，因为您曾经有工作'不从回调函数返回任何内容，因此会迭代整个数组。元素，这就是您在这里所做的。
4. this.disabled = true和this.disabled = false - 它们在组件类实例上设置disabled属性（这是<代码> this 是指），但是您需要做的是在每个禁用属性上设置属性> user 实例：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 显示它可以与这些更改一起使用。