我有一个Angular 7.2.15项目，安装了ng-bootstrap（https://ng-bootstrap.github.io/#/components/modal/examples）并取得了巨大的成功，直到现在我意识到我需要更改模式对话框的内容。

该对话框将仅显示一个API调用的结果，我知道该调用可以从Chrome网络视图中正常返回，基本上对于返回的每个记录，我们都需要在数据表中将“ 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>

然后，在我们的search-bar.component.ts中-我们成功地从filterService从Web服务获取SearchHistory，但是呈现结果带来了问题。如果我从上面的ng-template #contentOpen部分中获取数据表 out ，它将使数据表正常（尽管不在我们希望的模态中）。因此，在模态内，它根本不会呈现，但是在模态之外，表将呈现没有问题。

  openmodal(content) {
    this.GetSearchHistory();

    this.modalService.open(content,{ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    },(reason) => {
      this.closeResult = `Dismissed`;
    });
  }

    /* Obtains all of the search history for a user and renders table in
    the modal to display them */
    GetSearchHistory() {
      this.filteringService.getSearchHistory().subscribe(
        resp => {
          console.log(resp,'res');
          let r: WebServiceResponse;
          r = resp as WebServiceResponse;
          this.searchHistory = r.data;
          this.buildTableForSearchHistory();
      },error => { console.log(error,'error'); }
      );
    }

  buildTableForSearchHistory() {
    const options = {
      sDom: 't',renderer: 'bootstrap',destroy: true,data: this.searchHistory,columns: [
        { data: 'name',classname: 'dt-center max-width-10'
        }
      ],order: [0,'desc'],createdRow( row,data,dataIndex ) {
      },drawCallback: () => {
      }
    };
    this.dataTable = $(this.table.nativeElement);
    this.dataTable.DataTable(options);
  }

作为测试，我还在模态中设置了一个模拟的“刷新”按钮，它会触发上面看到的getSearchHistory()并在知道模态已成为焦点后构建表格，这也是无法解决问题。控制台抱怨下一行，这很有意义，因为我认为查找有问题的表要呈现给它很困难：

this.dataTable = $(this.table.nativeElement);

我不知道是否需要上下文之外的内容，尤其是它的简单程度，但是有一个有关Web服务的JSON响应示例：

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

还值得注意的是，我们不必在这里使用DataTables，因为要求实际上仅是将所有名称显示为链接，并且可能将queryText和filterJson作为元数据，因为稍后将需要它们。我只是认为，如果我们允许他们对结果进行排序，那可能是一件“好事”。

有人有什么想法或方法来解决这个问题吗？