2行の角表示ボタン

Question

動的に作成されたボタンを2列に表示しようとしていますが、その方法は少し不明です。これまでのところ、私は次のような作業を行っていますが、これは限られた4つのボタンのセットでのみ機能します。私が望むのは、1秒おきに改行を挿入することです。ここに私のコードは次のとおりです。

HTML：

<div id="departmentButtonsDiv" *ngFor="let department of lstDepartments; let i 
= index"> 
    <span *ngIf="department.blnHiddenOnLandingPage == false"> 
    <button pButton type="button" class="departmentButton" 
      (click)="navigateToDepartment(department.strName)" label= 
      {{department.strName}}></button> 
    </span> 
    <br *ngIf=" i == 3"> 
</div> 

CSS：

.departmentButton { 
height: auto; 
width: 200px; 
margin-bottom: 2px; 
} 

#departmentButtonsDiv{ 
position: relative; 
top: 10%; 
left: 45%; 
display: inline; 
} 

私が最初に私がチェックしngIfを設定した場合、インデックスが偶数であれば、それはトリックを行うだろうと思ったが、いくつかの要素が必ずしも表示されているわけではありません。なぜなら、それらのブール値がそれらを除外して、インデックス変数が増分されていることを意味するからです。レンダリングされているボタンだけでこのチェックを行う方法はありますか？もしそうなら、どうすればいいでしょうか？

私はフロントエンドの開発者ではないので、私のHTML/CSSは少しiffyです。私は約1ヶ月間Angularで働いていましたので、私はその前でも経験が足りません。私はこの点について助言やアドバイスをいただければ幸いです。私はこれを行うためのより良い方法にもオープンしています。なぜなら、これは、これを実行する多くの方法のほんの1つであると確信しているからです。

Answer 1

どのように動的な値department.blnHiddenOnLandingPageを？それが頻繁に変更されないものであれば、別のアプローチでは、コンポーネント内の部門リストをフィルタリングして、テンプレートで扱うロジックがあまりないようにすることができます。その後、

ngOnInit() { 
    ..... 
    this.filteredDepartments = this.lstDepartments.filter(dept => !dept. blnHiddenOnLandingPage); 
} 

そして、あなたのテンプレートで：

<div id="departmentButtonsDiv" *ngFor="let department of filteredDepartments; let i=index"> 
    <span> 
    <button pButton type="button" class="departmentButton" 
      (click)="navigateToDepartment(department.strName)" label= 
      {{department.strName}}></button> 
    </span> 
    <br *ngIf="i % 2 == 0"> 
</div> 

しばしばそのhiddenOnLandingPageフラグの変更、もし可能ならおそらく

ので、例えばのために、あなたのコンポーネントを持つことができるような何かをより適切な場所にフィルタを適用する場所を移動します。 （これは検出の変更に応答するように例えばフィルタリングされたリストを持つために、あなたのクラスのメソッドの戻り値である）

変更の頻度に応じて、私はその時点で異なるアプローチを取るかもしれない、が、私が望むラッピング効果を得るために、（<br>タグの代わりに）CSSを使用しようとします。

Answer 2

モジュラス演算子を使用してみてください。

<br ng-if="$index % 2 == 0"> 

これは、基本的にBRたび$インデックスあなたは新しいフレキシボックスを使用することができます。2.

Answer 3

の要因であることができます。 Tutorial

#departmentButtonsDiv { 
    display: flex; 
    flex-wrap: wrap; 
    width: 200px; 
} 
#departmentButtonsDiv span { 
    flex: 1 0 50%; 
    box-sizing: border-box; 
} 

これはCSSと同じように優れています。エルス

あなたは剰余で動作するように試みることができます。

<br *ngIf="i % 2 == 0"/> 

Answer 4

まず、偶数か奇数をチェックするあなたの方法が間違っている

<br *ngIf=" i == 3"> 

それは奇妙

<div *ngIf="id%2 == 1"> 

の場合でも

<div *ngIf="id%2 == 0"> 

についてこの

ようにする必要があります挿入されたブレークを持つには全ての偶数ボタン用のボタンがある場合、あなたはbrを挿入できるように、この

<div *ngIf="department.blnHiddenOnLandingPage == false"> 
    <span> 
     <button pButton type="button" class="departmentButton" 
       (click)="navigateToDepartment(department.strName)" label= 
       {{department.strName}}></button> 
     </span> 
     <div *ngIf="id%2 == 0"> 
    </div> 

が、私は別のdivにspanから*ngIfを移動してみてください。

希望これはAngular2で

Answer 5

を助け、あなたは、ブートストラップを使用している場合は、あなたがそう

<div *ngFor="let item of list; let i = index"> 
    <div class="col-md-6"><button type="button">Click me !</button></div> 
    <div class="clearfix" *ngIf="(i+1)%2 == 0"></div> 
</div> 

を行うことができますそれは基本的に2つのCOLSを追加して、明確な適用されます：新しい行を開始するには、両方の。