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可能同样简单，但如果您不想要周围的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指令是否为可以覆盖显示值的按钮添加样式。

ngFor循环中的换行

2 个答案: