Angular Datatable Responsive Extension不使用* ngFor指令

Question

我正在研究带有角度7的jhipster 5.7.2项目，我正在使用角度数据表，当我有静态数据时它的响应扩展正常工作，但是当我在标签中使用* ngFor指令时，它不会在调整大小时折叠列，只是隐藏列标题但列​​仍然存在。在我调整小窗口大小和大小恢复正常后，第一个表行的方向变得扭曲，并且在我重新加载页面之前不会得到修复。

P.S - 在寻找修复方面苦苦挣扎，并试图给表格宽度= 100％，但问题仍然存在。

用户管理，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。

用户管理，component.ts

ngOnInit() {

    this.dtOptions = {
        responsive: true
      };

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

全尺寸页面表

表调整窗口后

在此先感谢您的帮助！

Answer 1

我对你的问题有一半的答案，下面的代码调整表格，我用它来重新调整我的表格在sidemenu打开/关闭。它的答案是一半因为我不知道你什么时候打电话给它。我希望它有所帮助

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