Angular Datatable Responsive Extention не работает с директивой * ngFor - PullRequest
Новая
       22

Angular Datatable Responsive Extention не работает с директивой * ngFor

0 голосов
/ 31 января 2019

Я работаю над проектом jhipster 5.7.2 с angular 7 и использую угловые таблицы данных, и его адаптивное расширение работает нормально, когда у меня есть статические данные, но когда я использую директиву * ngFor в теге, столбец не сворачиваетсяпри изменении размера просто скрывает заголовок столбца, но столбец все еще там.После того, как я изменил размер окна до небольшого размера и вернул его к нормальному, ориентация первой строки таблицы искажалась и не исправлялась до тех пор, пока я не перезагрузил страницу.

PS - Сильно боролся при поиске исправления, ипопытался задать ширину = 100% для таблицы, но проблема все еще сохраняется.

user-management-component.html 

<div>
        <table datatable [dtOptions]="dtOptions" class="row-border hover" width="100%">
            <thead>
              <tr class="tr-bg">
                <th>ID</th>
                <th>Login</th>
                <!-- <th>Last name</th> -->
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let user of users; trackBy: trackIdentity">
                <td><span>{{user.id}}</span></td>
                <td><span>{{user.login}}</span></td>
                <!-- <td><span>Bar</span></td> -->
              </tr>
            </tbody>
          </table>
      </div>

Вот функция ngOnInit ()где объявляются dtOptions.

user-management-component.ts 

ngOnInit() {

    this.dtOptions = {
        responsive: true
      };

    this.accountService.identity().then(account => {
        this.currentAccount = account;
        this.loadAll();
        this.registerChangeInUsers();
    });
}

Таблица страниц в полном размере Full Size page table

Таблица После изменения размера окна enter image description here

Заранее спасибо за помощь!

1 Ответ

0 голосов
/ 21 февраля 2019

У меня есть половина ответа на ваш вопрос, приведенный ниже код корректирует таблицу, я использую ее для перенастройки моих таблиц в боковом меню открытия / закрытия.Это половина ответа, потому что я не знаю, когда вы должны это назвать.Я надеюсь, что это помогает 

datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {         
    dtInstance.columns.adjust().draw();   
})
...