javascript - Tôi đang cố gắng vô hiệu hóa và kích hoạt checkbox dựa trên giá trị trong angular 8

Đây là mã của tôi

Tôi đang có một Mảng Danh sách như sau: đây là getCall. ktsessions=[ {"presenter":"Bharath","topic":"Angular","status":"scheduled","emailId":"[email "}, {"presenter":"Sayyad","topic":"Angular","status":"organized","emailId":"[email "},{"presenter":"Kanchan","topic":"APS","status":"scheduled","emailId":"[email "} ];

<tr *ngFor = "let ktsession of ktsessions >

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

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

Câu trả lời #1

Có một số vấn đề ở đây.

1. <tr *ngFor="let ktsession of ktsessions > - Thiếu dấu nháy đóng sau ktsessions
2. <td ><input type="checkbox" [disabled]='disabled'></td> - [disabled]='disabled' nên là [disabled]="ktsession.disabled". Mỗi hộp kiểm cần có thuộc tính disabled riêng. [disabled]='disabled' sẽ đặt thuộc tính disabled của mỗi hộp kiểm thành thuộc tính disabled của instance lớp component thay vì instance của hộp kiểm.
3. this.ktsessions.find(user => { - Phương thức Array#find không phải là phương thức phù hợp để sử dụng ở đây, mặc dù nó vẫn hoạt động vì bạn không trả về gì từ callback function và do đó nó sẽ duyệt toàn bộ mảng. Array#find dùng để tìm một phần tử trong mảng phù hợp với tiêu chí cụ thể và trả về phần tử đó, không phải để duyệt qua mảng và thiết lập các thuộc tính trên từng phần tử, điều mà bạn đang làm ở đây. Array#forEach mới là phương thức phù hợp cho việc đó.
4. this.disabled=true và this.disabled=false - đây là thiết lập thuộc tính disabled trên thể hiện lớp component (mà this đang tham chiếu đến), nhưng điều bạn cần làm là thiết lập thuộc tính disabled trên từng thể hiện user: user.disabled=true hoặc user.disabled=false.

Vì vậy mẫu của bạn nên trông giống như thế này:

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

Và subscribe của bạn nên trông giống như sau:

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

Đây là một StackBlitz cho thấy nó hoạt động với những thay đổi đó.