Angular 數據表：如何根據列數據禁用立即行復選框

Question

如何根據列數據禁用行復選框。 有一個數據表並且必須寫一個條件，如果firstname="Superman",需要disable checkbox of the row. 所以不可能再次選擇 select 復選框。 我嘗試使用下面的代碼，但我無法禁用該復選框。 我試過下面的代碼，

this.http.get(dataUrl).subscribe(response => {
  // setTimeout(() => {
  this.persons = response.data;
  $.each(this.persons, function(key, value) {
    if (value.firstname == "Superman") {
      console.log("inside");
      // $('.checkboxCls').prop('disabled', true);
      $(this)
        .closest("tr")
        .find("input[type=checkbox]")
        .prop("disabled", true);
    }
  });
  this.dtTrigger.next();
  // });
});

這是工作中的Stackblitz供參考。 您能否提出問題所在。

Answer 1

您可以從 HTML 模板端禁用該復選框。

    <td><input [disabled]="person.firstName === 'Superman'" type="checkbox" class="checkboxCls" name="id" [checked]="isChecked" value="{{person.id}}"></td>

編輯StackBlitz代碼