ionic2の行と列に項目を配置する

Question

hereのようにボタンを行列形式で配置する必要があります。私はアプリionic2モバイルアプリでこれを再現しようとしています。
これをangle2 *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>と<ion-col>タグをionic2としてみました。出来た。しかし、ボタンは以下のように一様に配置されていません。

<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

私はそれが今働いています。以前のコードでは構文エラーがほとんどありませんでした。以下のために例えば、代わりにofの

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

私は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は同じです。