Question

如何动态显示表格/表格中有60个项目？列数是固定的，例如6.

每个项目都是可单击的，并将使用所选项目调用一个方法。每行有（例如）6列。表的大小由检索到的项目列表动态确定。

Answer 1

要使用动态生成的行和列生成网格，可以使用以下代码：

<ion-grid>
    <!-- Assuming dynamicElements is an Array holding your items -->
    <ion-row *ngFor="let element of dynamicElements">
        <ion-col>
            {{element.name}}
        </ion-col>
        <!-- Your other columns go here -->
        <ion-col>
            <button ion-button>Button text</button>
        </ion-col>
    </ion-row>
</ion-grid>

我正在使用Ionic Grid和*ngFor-loop。请参阅文档以获取更多信息，例如有关如何调整列的大小或对齐方式。

网格将占用dynamicElements.length * rowHeight的大小

我不确定我是否理解正确，但是如果要动态计算行的高度以使其符合伪代码中的给定高度，则应该这样做：

rowHeight = gridHeight / dynamicElements.length

Answer 2

@Phonolog-感谢您向我展示方法。我+1您的答案。

显示例如最多6列，最多60列，您可以执行以下操作：

<ion-grid>
  <ion-row>
    <ion-col *ngFor="let element of elements" col-2>
      {{element}}
    </ion-col>
  </ion-row>
</ion-grid>

Ionic3-在尺寸相等的单元格表中动态显示许多项目

2 个答案: