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

Question

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

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

以下是搜索中的两个重要片段 - 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>

然后，在我们的搜索中 - bar.component.ts - 我们成功地从过滤服务的网络服务中获取了 SearchHistory，但是呈现结果造成了问题。如果我从上面的 ng-template #contentOpen 部分中获取 datatable out ，它将很好地呈现 datatable （尽管不在模态中，因为我们希望它是）。所以在模式内，它根本不呈现，但在它之外，table 将毫无问题地呈现。

  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);
  }

作为测试，我还在模式中设置了一个模拟的 "refresh" 按钮，它会触发我们在上面看到的 getSearchHistory() 并在我们知道之后构建 table模态是重点，这也不能解决问题。控制台抱怨以下行，这是有道理的，因为我认为它无法找到有问题的 table 来渲染到：

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}]}

另外值得注意的是我们不一定要在这里使用数据表，因为要求实际上只是将所有名称显示为 links 并且可能将 queryText 和 filtersJson 作为元数据，因为我们需要他们以后。我只是认为如果我们允许他们对结果进行排序，它可能是 "nice to have"。

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

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>

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

Issues Building Datatable Within ng-bootstrap Modal

javascript

datatable

modal-dialog

ng-bootstrap

angular