2017-08-16 10 views
1

私はbulma css frameworkで角4を使用しています。どのように新しい行(または列クラス)を3列ごとに追加できるのでしょうか。角度4 * ng第3列ごとにdivを追加する

ブートストラップを使用しているときにsnippetを見ると、0,1,2,0,1,2などを印刷するインデックス変数がありました。

多分私はtemplate syntaxを使用することができますが、どちらかというとそれを動作させることはできませんでした。

<div class="columns"> 
    <div class="column is-one-third" *ngFor="let item of items | async; let index = index"> 
     <app-item-details [item]='item '></app-item-details> 
     {{ index % 3 }} 
    <div class="is-clearfix" *ngIf="index % 3 == 0"></div> 
    </div> 
</div> 
+2

NG-IF = '* ngIf' – echonax

+1

私はあなたがここに何を意味するのか理解していないので、あなたの質問では、予想される出力を提供してください。 – n00dl3

+0

私はそれを間違って入力したことに気付きましたが、それはブートストラップスニペットのためです。そのため、bulmaフレームワークを使用するときに動作することを期待していませんでした。 (それもどちらも助けなかった)私が必要とするのは、ループの3番目の項目ごとに新しい列クラスの周りに結果をラップすることです。 – stibay

答えて

2

* ngIfの条件を以下のように変更します。

*ngIf="(index + 1) % 4 == 0" 

Plunker例:https://plnkr.co/edit/C0DrgY3Rty33ZRhyML7E?p=preview

+0

OP 1回目の繰り返し後にプランナーに3回ごとにdivを追加したい場合、4回ごとに行が追加されますので、私はあなたの[プランカー]にいくつか調整を行いました(https://plnkr.co/edit/CUXb1ubGBNUW13KUAm2b?p=preview ):) – Nehal

関連する問題