ngForループ内の改行

Question

私はいくつかのPrimeNGボタンを作成するngForを持っています。今、ボタンは、同じ行にお互いの直後に表示されます - 私は各ボタンをその行に垂直に表示したいです。あなたはどうやってそれをやりますか？ここに私のngForコードは次のとおりです。

<button pButton type="button" 
      *ngFor="let atrConfig of atrConfigs; let i = index" 
      (click)="selectConfiguration(atrConfig)" label = ""> 
     Name: {{atrConfig.name}} <br /> 
</button> 

Answer 1

あなたはng-containerタググループ・エレメントを使用する必要がありますが、ノードとしてDOMツリーにレンダリングされません。この例では

<ng-container *ngFor="let atrConfig of atrConfigs; let i = index" > 
    <button pButton type="button" 
     (click)="selectConfiguration(atrConfig)" label = ""> Name: {{atrConfig.name}} 
    </button> 
    <br /> 
</ng-container> 

、CSSを使用するのと同じように単純なことかもしれないが、あなたは周囲のdiv例えばしたくない場合はng-containerは非常に便利ですテーブルを作成する

Answer 2

ボタンにdisplay: blockのCSSクラスを追加するだけです。 またはインライン次の例のようにそれを追加します。pButtonディレクティブは、表示値を上書きすることができ、ボタンにスタイルを追加する場合、私はアイデアを持っていない

<button pButton type="button" style="display: block;" 
      *ngFor="let atrConfig of atrConfigs; let i = index" 
      (click)="selectConfiguration(atrConfig)" label = ""> 
     Name: {{atrConfig.name}} <br /> 
</button> 

。