Проблемы построения Datatable в моде ng-bootstrap - PullRequest
Новая
       31

Проблемы построения Datatable в моде ng-bootstrap

0 голосов
/ 06 ноября 2019

У меня есть проект Angular 7.2.15, в котором я с большим успехом установил ng-bootstrap (https://ng -bootstrap.github.io / # / components / modal / examples ) до тех пор, покаЯ понимаю, что мне нужно изменить содержимое модального диалога.

Диалог будет просто отображать результат вызова API, который, как я знаю, прекрасно возвращается из представлений Chrome Network, по существу для каждой записи, которая возвращается,нам нужно отобразить атрибут «name» в datatable как ссылку (в конце концов, эта ссылка загрузит сохраненный запрос по имени) и значок для его удаления.

Вот два важных фрагмента из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 - мы успешно получаем историю поиска из нашего веб-сервиса из службы filteringService, но визуализация результатов создает проблему. ,Если я возьму datatable out из приведенного выше раздела ng-template #contentOpen, он будет отображать данные в порядке (хотя и не в модальном виде, как хотелось бы). Таким образом, в модальном режиме он не отображается вообще, но вне него таблица будет отображаться без проблем. 

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

Я не знаю, нужно ли это дальшеконтекст, особенно для того, насколько это просто, но пример ответа 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, так как они понадобятся нам позже. Я просто подумал, что было бы неплохо, если бы мы позволили им отсортировать результаты.

У кого-нибудь есть мысли или способы помочь решить эту проблему?

1 Ответ

0 голосов
/ 06 ноября 2019

Реализованная привязка таким образом разрешает ее, так как не было необходимости в использовании 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>
...