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>

产生这个

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

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>

Answer 2

通过使用bootstrap，这是将它放在一行中的方法。

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

或使用简单的 CSS

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

Answer 3

The Angular ng-container is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM

<ng-container *ngFor="let group of groups; let i = index" class="group">
   <button (click)="changeGroup(i)">{{group}}{{i}}</button>
</ng-container>

ngFor 停止自动换行

ngFor stop automatic newline

ngfor

angular