行列的网格布局ngfor

你可以用 index 就像你在帮助它 i 我已经在我的html中测试了下面的case。

<GridLayout columns="*,*,*"  class="grid-book">
  <StackLayout *ngFor="let plan of plans; let i = index" row="{{i}}" col="0" horizontalAlignment="stretch">
    <StackLayout height="150" class="book">
      <AbsoluteLayout height="150">
        <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
        <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
      </AbsoluteLayout>
    </StackLayout>
    <Label text="{{ plan.name }}"></Label>
  </StackLayout>
</GridLayout>

在我的.ts文件中 plans = [{ 'name': 'Name 1' }, { 'name': 'Name 2' }, { 'name': 'Name 3' }];

如果您看到使用调试器的输出

您有固定数量的列(3)和无限数量的行(totalRows)。与其填充一个大的GridLayout,我建议用ngFor作为最外层的布局来创建StackLayout,并将带有1行3列的GridLayout放在循环模板中。

<StackLayout *ngFor="let plan of plans">
    <GridLayout rows="*" columns="* * *">
        <Label text="A" col="0"></Label>
        <Label text="B" col="1"></Label>
        <Label text="C" col="2"></Label>
    </GridLayout>
</StackLayout>

一旦基本循环和布局开始工作,就可以使用自定义的每个单元格模板替换标签。如果在堆栈中使用此网格技术,则不需要i/索引或totalRows字符串值。

可以对行/列使用属性绑定来保持其动态性。但如果GridLayout中有这么多分区(如20或25+),则很容易遇到性能问题。

在我看来,你应该使用StackLayout在垂直方向上相邻地堆叠项目,并在每个项目内部使用GridLayout来划分列。如果可能的话,我建议使用ListView而不是ngFor。