Slick Grid не отображает данные внутри вкладки под углом

Question

Я использую Angular Slickgrid для отображения данных внутри вкладок (более одной вкладки). Я получаю данные от службы, но в таблице не отображаются данные. На нескольких вкладках отображаются данные, но не заголовок таблицы

Вот код:

 Parent File

   <div class="tab-pane fade" id="h2">
      <div class="row">
        <article class="col-sm-12">
            <sa-users-list [id]="gridUsersList"></sa-users-list>               
        </article>
      </div>
    </div>

     <div class="tab-pane fade" id="h3">
      <div class="row">
        <article class="col-sm-12">
          <sa-facility-list [id]="gridFacility"></sa-facility-list>             
        </article>
      </div>
    </div>

Список пользователей Файл

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

Список объектов

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

Answer 1

SlickGrid плохо работает с скрытыми DOM-элементами, после изменения вкладок вы должны обязательно вызывать изменение размера сетки, это может не понадобиться на первой вкладке, но полностью необходимо для всех последующих вкладок.

Вы можете увидеть живую демонстрацию здесь , то есть новый Пример 24 Я недавно добавил.

Например, с ngx-bootstrap, обратите внимание на вызов (selectTab)="resizeGrid2()"

<div>
    <tabset>
      <tab heading="Javascript" id="javascript">
        <h4>Grid 1 - Load Local Data</h4>
        <angular-slickgrid gridId="grid1"
          [columnDefinitions]="columnDefinitions1"
          [gridOptions]="gridOptions1"
          [dataset]="dataset1">
        </angular-slickgrid>
      </tab>
      <tab heading="Http-Client" (selectTab)="resizeGrid2()">
        <h4>Grid 2 - Load a JSON dataset through Http-Client</h4>
        <angular-slickgrid gridId="grid2"
          [columnDefinitions]="columnDefinitions2"
          [gridOptions]="gridOptions2"
          [dataset]="dataset2"
          (onAngularGridCreated)="angularGrid2Ready($event)">
        </angular-slickgrid>
      </tab>
    </tabset>
  </div>

Компонент (демонстрационный компонент ссылка )

export class MyComponent implements OnInit {

  angularGrid2: AngularGridInstance;
  columnDefinitions1: Column[];
  columnDefinitions2: Column[];
  gridOptions1: GridOption;
  gridOptions2: GridOption;
  dataset1: any[];
  dataset2: any[];


  angularGrid2Ready(angularGrid: AngularGridInstance) {
    this.angularGrid2 = angularGrid;
  }

  resizeGrid2() {
    this.angularGrid2.resizerService.resizeGrid();
  }

Быстрое примечание, я автор Angular-Slickgrid , который использует вилку 6pac / SlickGrid (на которую Бен указал в предыдущем ответе).

Еще одна важная вещь - убедиться, что все ваши сетки имеют уникальные gridId, что может быть вашей проблемой. Таким образом, вы также можете взглянуть на этот другой SO , который связан, так как это также для вкладок

Answer 2

Просто проверяете, используете ли вы этот репо - в ветке MLeibman есть проблемы с инициализацией скрытых сеток. См. Например здесь

Это не Angular репо, но эти проблемы, вероятно, все еще актуальны.