ng停止自动换行

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

通过使用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 2

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 3

Angular ng-container是一个分组元素，不会干扰样式或布局，因为Angular不会将它放在DOM中

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