ngFor循環換行

Question

我有一個ngFor，它創建了幾個PrimeNG按鈕。現在，按鈕在同一行上直接出現在彼此之後 - 我希望每個按鈕都垂直顯示在其上。你如何去做這件事？這裏是我的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，但ng-container是非常有用的，如果你不想周圍div就如填充表格

Answer 2

只需在您的按鈕中添加一個帶有display: block的css類。 或者添加它內嵌像下面的例子：

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

我沒有想法，如果pButton指令增加了樣式可以覆蓋顯示值的按鈕。