Кнопка Отключить в таблицах угловых данных

Question

Я использую данные для извлечения данных из API через AJAX и отображения их в таблице. Есть несколько кнопок, которые будут управлять несколькими действиями с данными.

Я заметил, что не могу использовать угловые директивы внутри таблицы данных и вынужден полагаться на jquery для обработки нажатий кнопок. Я хотел бы отключить некоторые кнопки внутри таблицы данных на основе данных, возвращаемых из API. Но опция [disabled] от angular не работает внутри таблицы данных.

Вот мой код 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 для обработки нажатий кнопок. Но как еще я могу изменить классы или отключить кнопки, определенные внутри таблицы данных?