Angular 2表格无法在移动设备上正常显示

Question

我正在使用Angular Material / NgBootstrap / Bootstrap 4构建一个Web应用程序。

我有一个表格，用户可以在该表格中搜索日期范围内的数据，然后数据会在表格中显示给用户。

在我的桌面环境中一切正常，如下图所示，其中显示了12组数据，我可以向下滚动

然而，对于我的移动设备，视图被切断，我看不到表中的任何数据

有没有人遇到过类似的问题，因为Angular 2应用程序或者4个应用程序可能会关闭移动设备上的行为？

以下是我用来显示表格的代码

<table *ngIf="myArray.length > 0 && !isLoading" class="table table-striped table-hover">
    <thead>
    <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Hours</th>
        <th>Status</th>
    </tr>
    </thead>

    <tbody>
    <tr *ngFor="let data of myArray" (click)="onRowClick(pastApproval)">
        <td>{{data.firstName}} {{data.lastName}}</td>
        <td>{{data.workDate_epoch}</td>
        <td>{{data.totalHours}}</td>
        <td>{{data.status}}</td>
    </tr>
    </tbody>
</table>

请注意。如果我在手机上使用chrom浏览器，它会显示12行中的一行。有点不同于我在这里显示的内容，我认为是来自safari（从facebook链接打开）

Answer 1

这是一个CSS问题。一旦我将容器的css更改为

height: 100%; 

到

display:block; 
overflow:auto;

问题消失