Question

我正在使用angular 7进行jhipster 5.7.2项目，并且正在使用角度数据表，当我有静态数据时，它的响应扩展工作正常，但是当我在标记中使用* ngFor指令时，它不会折叠列在调整大小时，仅隐藏列标题，但该列仍然存在。在我将窗口大小调整为小尺寸并将大小恢复为正常后，第一行表格的方向就会扭曲，并且直到重新加载页面后才能固定。

P.S-在寻找解决方法时费了很多劲，并尝试将width = 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();
    });
}

全尺寸页表

表格调整窗口大小后

预先感谢您的帮助！

Answer 1

我对您的问题有一半的回答，下面的代码调整了表格，即时消息用于在侧菜单打开/关闭时重新调整表格。它的答案是一半，因为我不知道您何时应该称呼它。希望对您有帮助

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

Angular Datatable响应式扩展不适用于* ngFor指令

1 个答案: