禁用Angular数据表上的按钮

Question

我正在使用数据表通过AJAX从API提取数据并将其显示在表上。有几个按钮可以控制对数据的多种操作。

我注意到我不能在数据表中使用angular指令，而必须依靠jquery来处理按钮单击。我想根据API返回的数据来禁用数据表中的某些按钮。但是angular的[disabled]选项在数据表中不起作用。

这是我的TS代码：

import {
  AfterViewInit,
  Component,
  OnInit,
  ViewChild,
  ElementRef
} from "@angular/core";
import { DataTableDirective } from "angular-datatables";

@Component({
  selector: "app-order",
  templateUrl: "./order.component.html",
  styleUrls: ["./order.component.scss"],
  providers: []
})
export class OrderComponent implements OnInit, AfterViewInit {
  @ViewChild(DataTableDirective) dtElement: DataTableDirective;
  dtTrigger: Subject<any> = new Subject();
  dtOptions: DataTables.Settings = {};

  constructor(
    private element: ElementRef
  ) { }

  ngOnInit(): void {

    this.dtOptions = {
      stateSave: true,
      language: {
        searchPlaceholder: "Search by Name & Email"
      },
      autoWidth: false,
      pagingType: "full_numbers",
      pageLength: 10,
      serverSide: true,
      processing: true,
      ajax: this.getOrder(dataTablesParameters, callback);
      columns: [
        { data: "firstname", defaultContent: "" },
        { data: "lastname", defaultContent: "" },
        {
          data: null,
          orderable: false,
          render: function (data, type, row) {
            // tslint:disable-next-line:max-line-length
            return `
            <button type="button" class="btn btn-primary btn-sm order" ngClass="(data.status=='ordered')?'disabled':''" data-element-id="${
              data.id }"><i class="fa fa-pencil order" data-element-id="${
              data.id }"></i> Edit</button>

              <button type="button" class="btn btn-danger btn-sm upload" [disabled]="!data.status" data-element-id="${
              data.id }"><i class="fa fa-upload" data-element-id="${ 
              data.id }"></i></button>`;
          }
        }
      ]
    };
  }
  ngAfterViewInit(): void {
    this.dtTrigger.next();
    this.element.nativeElement
      .querySelector("table")
      .addEventListener("click", this.handleTable.bind(this));
  }
  handleTable(event) {
    const target = <Element>event.target;
    if (
      (target.tagName.toLowerCase() === "button" &&
        $(target).hasClass("order")) ||
      (target.tagName.toLowerCase() === "i" &&
        $(target).hasClass("order"))
    ) {
      const id = target.attributes["data-element-id"].nodeValue;
      this.order(id);
    } else if (
      (target.tagName.toLowerCase() === "button" &&
        $(target).hasClass("upload")) ||
      (target.tagName.toLowerCase() === "i" &&
        $(target).hasClass("upload"))
    ) {
      const id = target.attributes["data-element-id"].nodeValue;
      this.upload(id);
    }
  }

  upload(id){
    //Upload something
  }

  order(id){
    //order something
  }

  getOrder(){
    // Call API and get data
  }
  }

HTML代码：

<div class="animated fadeIn">
  <div class="card">
    <div class="card-block">
      <div class="row">
        <div class="col-md-12">
          <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="laborder?.length == 0">
                <td colspan="3" class="no-data-available">No Orders Found!</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

我同时尝试了[disabled]和[ngClass]，但都没有用。我相信这是因为它实际上并不是一个有角度的模板，这就是为什么我使用jQuery处理按钮单击的原因。但是我还能如何更改数据表中定义的类或禁用按钮？