html - 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 会非常有用，例如填充表格