在ionic2中按行和列排列项目

Question

我需要按矩阵格式排列按钮，如图 here 所示。我正在尝试在 ionic2 移动应用程序中重现这一点。
这是我尝试将其转换为 angular2 *ngFor 和 *ngIf。

 <div *ngFor="tag in item.tags;let tagIndex = index">
        <div class="row" *ngIf="index % 3 == 0">
          <div *ngFor="i in [0,1,2]">
            <div *ngIf="(tagIndex + i)<item.tags.length"
                <button style="margin:5px">{{item.tags[tagIndex+i]}}</button>
            </div>
          </div>
        </div>  
  </div>

我什至没有显示按钮。我尝试使用 ionic2 的 <ion-row> 和 <ion-col> 标签。有效。但是，按钮并没有统一放置，如下所示。

使用 <ion-row> 显示的代码是这样的...

<ion-row id="footer">
    <ion-col style="margin:5px 5px 5px 5px" *ngFor="let tag of item.tags">
        <button [innerHtml]="tag" (click)="tagClicked($event, tag)"></button>
    </ion-col>
</ion-row>

css

#footer {
    float:left;
    clear: both;
    text-align: center;
    padding: 5px;        
    flex-wrap:wrap;
    display:flex;
}

如果使用 <ion-row> 是更好的方法，因为框架负责在网格布局中显示所有标签，我应该如何让它们以统一的距离排列？

Answer 1

我现在开始工作了。我之前的代码中几乎没有语法错误。例如，

 <div *ngFor="tag in item.tags;let tagIndex = index"> .

我输入 in 而不是 of。现在代码已修复，我可以让按钮统一显示。这是最终代码。

<div  *ngFor="let tag of item.tags;let tagIndex = index">
         <div id="footer" *ngIf="tagIndex % 3 == 0">
              <div *ngFor="let i of [0,1,2]">
                <button class="col" style="margin:5px" *ngIf="(tagIndex + i) < item.tags.length" class="col" style="margin:5px">{{item.tags[tagIndex +i]}}</button>
                </div>
         </div>
  </div>

css保持不变。

在ionic2中按行和列排列项目

Arranging items in rows and columns in ionic2

grid-layout

ionic2

angular