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 可能同样简单，但如果您不想要周围的 div，则 ng-container 会非常有用，例如填充 table

Answer 2

只需将 css class 和 display: block 添加到您的按钮即可。或者像下一个例子一样内联添加它：

<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 指令是否将样式添加到可以覆盖显示值的按钮。

ngFor 循环中的换行符

Line break in ngFor loop

html

ngfor

angular