Угловая скользящая сетка не отображается внутри динамической вкладки (вкладка ngx-bootstrap)

Question

Я использую Angular Slickgrid для отображения данных таблицы внутри вкладок. У меня есть HTML-страница, где две вкладки являются статическими, также отображая данные правильно, и другие вкладки динамически создаются из выделенной вкладки в конце, которая в основном создает запрос из входных данных, и когда вы сохраняете вкладку, она создает новую вкладку, добавьте это после 2-ой вкладки и отправляет запрос на вновь сгенерированную вкладку, которая будет извлекать запись из сервиса с данным запросом. Я успешно получаю данные из службы, но в таблице ничего не отображается, даже заголовок таблицы. Вот код:

Родительский HTML:

   <tabset #tabsetId>
    <tab heading="heading1" id="1" (selectTab)="onSelectTab($event)">
       <child-component [query]="query"></child-component>
    </tab>

    <tab heading="heading2" id="2" (selectTab)="onSelectTab($event)">
       <child-component [query]="query"></child-component>
    </tab>

    <!--below tab is not displaying any data -->
    <tab id="3" *ngFor="let tabz of tabs" [heading]="tabz.title" [active]="tabz.active"
    (selectTab)="onSelectTab($event)" (deselect)="tabz.active = false" [disabled]="tabz.disabled"
    [removable]="tabz.removable" (removed)="removeTabHandler(tabz)">
    <child-component [query]="query"></child-component>
    </tab>
</tabset>
    <!-- Note: Child component is having angular slick grid code -->

Дочерний код html:

<div style="height:auto;width:750px">
   <angular-slickgrid gridId="grid1" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
   [dataset]="responseList" (onAngularGridCreated)="angularGridReady($event)">
   </angular-slickgrid>
</div>

Дочерний компонент:

    export class ChildComponent {
      @Input() query: Array<any>;
      ngOnInit() {
        this.columnDefinitions = [
          { col- 1},{ col - 2 }
       ]
    this.gridOptions = {
      enableAutoResize: true,
      enableCellNavigation: true,
      enableFiltering: true,
      forceFitColumns: true
    }
    this.fetchData(this.query);
    }

    angularGridReady(angularGrid: AngularGridInstance) {
     console.log('slickgrid created');
      }

      private fetchData(query: Array<any>) {
        // Clearing response list
        this.responseList = [];
          this.service.fetchDataByQuery(query).subscribe(responseList => {
          this.responseList = responseList;
          });

      }
    }

Answer 1

В вашем child-component.html я вижу, что вы каждый раз передаете один и тот же gridId тегу angular-slickgrid.Вместо этого вы можете каждый раз передавать уникальный идентификатор в виде углового ввода из родительского компонента.

Наконец, ваши дочерние и родительские фрагменты htmls выглядят следующим образом.

Родительский html:

<child-component [id]="id" [query]="query"></child-component>

Child html:

<angular-slickgrid [gridId]="id" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
   [dataset]="responseList" (onAngularGridCreated)="angularGridReady($event)">
   </angular-slickgrid>

Счастливое кодирование.