ngFor 循环中的换行符

【问题标题】：Line break in ngFor loopngFor 循环中的换行符
【发布时间】：2017-06-15 23:16:27
【问题描述】：

我有一个 ngFor 可以创建几个 PrimeNG 按钮。现在，这些按钮直接在同一行上彼此相邻出现 - 我希望每个按钮都垂直显示在其线上。你怎么做呢？这是我的 ngFor 代码：

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

【问题讨论】：

标签： html angular ngfor

【解决方案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 会非常有用，例如填充表格

【讨论】：

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

【讨论】：