Javascript 在ng引导模式中构建数据表的问题

我有一个Angular 7.2.15项目，安装了ng bootstrap（），非常成功，直到现在我才意识到需要更改模式对话框的内容

该对话框将简单地显示一个API调用的结果，我知道该调用从Chrome网络视图中很好地返回，基本上对于返回的每个记录，我们需要将datatable中的“name”属性显示为一个链接（最终，该链接将按其名称加载保存的查询）和一个用于删除它的图标

下面是有关search-bar.component.html的两个重要片段：

<ng-template #contentOpen let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Open Query</h4>   
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button> 
  </div>
  <div class="modal-body">
    Select from the following list of saved queries:
    <table #dataTable class="table">
    <thead>
    <tr class="table-header">
    <td class="max-width-80">Search Name</td>
    <td class="max-width-20">Delete</td>
    </thead>
    <tbody class="table-body">
    </tbody>
    </table>
  </div>
</ng-template>

...

  <div class="col-md-1">
    <button class="SearchGrayButton" (click)="openModal(contentOpen)">Open Search <span class="fa fa-folder-open-o"></span></button>
  </div>

{"status":null,"code":null,"messages":[],"data":[{"id":1,"userId":null,"name":"manual test name","queryText":null,"filtersJson":null},{"id":2,"userId":null,"name":"testname","queryText":null,"filtersJson":null},{"id":3,"userId":null,"name":"testname","queryText":null,"filtersJson":null}]}

作为测试，我还在模式中设置了一个模拟的“刷新”按钮，它会触发我们上面看到的

getSearchHistory（）

，并在我们知道模式处于焦点后构建表，这也不能解决问题。控制台抱怨以下行，这是有道理的，因为我认为它很难找到要呈现到的表：

this.dataTable=$（this.table.nativeElement）

我不知道在上下文之外是否需要它，特别是它有多简单，但有一个web服务的JSON响应示例：

<ng-template #contentOpen let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Open Query</h4>   
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button> 
  </div>
  <div class="modal-body">
    Select from the following list of saved queries:
    <table #dataTable class="table">
    <thead>
    <tr class="table-header">
    <td class="max-width-80">Search Name</td>
    <td class="max-width-20">Delete</td>
    </thead>
    <tbody class="table-body">
    </tbody>
    </table>
  </div>
</ng-template>

...

  <div class="col-md-1">
    <button class="SearchGrayButton" (click)="openModal(contentOpen)">Open Search <span class="fa fa-folder-open-o"></span></button>
  </div>


{"status":null,"code":null,"messages":[],"data":[{"id":1,"userId":null,"name":"manual test name","queryText":null,"filtersJson":null},{"id":2,"userId":null,"name":"testname","queryText":null,"filtersJson":null},{"id":3,"userId":null,"name":"testname","queryText":null,"filtersJson":null}]}

同样值得注意的是，我们不一定要在这里使用DataTables，因为需求实际上只是将所有名称显示为链接，并且可能将queryText和filtersJson作为元数据，因为我们以后需要它们。我只是想，如果我们允许他们对结果进行排序，这可能是一个“很好的选择”

是否有人有任何想法或方法来帮助解决此问题？
以这种方式实现的绑定可以解决此问题，因为不需要使用DataTables：

  <div class="modal-body">
    Select from the following list of saved queries:
    <ul>
      <li *ngFor="let s of searchHistory">{{s.name}}</li>
    </ul>
  </div>


从以下已保存查询列表中选择：

{{s.name}