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

通过使用引导程序，这是将其排成一行的方法。

<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

  

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

<p class="task_description">
  {{ task.description }} <span class="badge badge-pill">priority</span>
</p>
<p class="task_priority">
  {{ task.priority }}
</p>