angular - ngFor 停止自动换行

Question

无论如何要停止将每个元素放在新行上的 ngFor 循环？

这是我现在拥有的代码

<div class="groups">
    <h3>Groups:</h3>
    <div *ngFor="let group of groups; let i = index" class="group">
       <button (click)="changeGroup(i)">{{group}}{{i}}</button>
    </div>
</div>

产生这个

如何使按钮出现在同一行？

标签： angularngfor

Answer 1

ngFor循环在元素div上。由于这些是块元素，因此您最终会得到一堆垂直的div容器，每个容器都包含一个按钮。

要获得一个包含所有按钮的块，请将ngFor循环放在button元素上：

<div class="groups">
    <h3>Groups:</h3>
    <div class="group">
       <button *ngFor="let group of groups; let i = index" (click)="changeGroup(i)">{{group}}{{i}}</button>
    </div>
</div>