在ionic2

Question

我需要按照here所示的矩阵格式排列按钮。我试图在app 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> 

我甚至没有显示按钮。我尝试使用<ion-row>的{​​{1}}和<ion-col>代码。有效。但是，按钮没有均匀放置，如下所示。

使用ionic2显示的代码是......

<ion-row>

css

<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>   

如果使用#footer { float:left; clear: both; text-align: center; padding: 5px; flex-wrap:wrap; display:flex; } 是更好的方法，因为框架负责在gridlayout中显示所有标签，我应该如何使它们以均匀的距离排列？

Answer 1

我现在就开始工作了。我之前的代码中的语法错误很少。例如，

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

而不是of我放in。现在修复了代码，我可以统一显示按钮。这是最终的代码。

<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保持不变。