在 ng-bootstrap 模式中构建数据表的问题

Question

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

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

以下是相关 search-bar.component.html 中的两个重要的 sn-ps：

<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 中——我们成功地从过滤服务的 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,"userId":null,"name":"testname","queryText":null,"filtersJson":null},{"id":3,"userId":null,"name":"testname","queryText":null,"filtersJson":null}]}

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

有没有人有任何想法或方法来帮助解决这个问题？

Answer 1

以这种方式实现的绑定解决了它，因为不需要使用 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>