自动换行停止

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

这个 ngFor 回路已打开 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>

Angular ng容器是一个分组元素,它不 干扰样式或布局,因为Angular不会将其放入 多姆

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