显示弯曲不会像预期的那样折断长行

Question

尝试使用flex display在一行中显示事物列表。我正在使用angular 7进行开发。 下面是我实现的HTML：

<div class="d-flex">
  <span>Other:&nbsp;</span>
  <div class="d-flex">
    <div *ngFor="let allergy of allergies; let i = index">
      <span *ngIf="i > 0">,</span><span *ngIf="allergy"> {{ allergy }}</span>
      <span *ngIf="!allergy">None</span>
    </div>
  </div>
</div>

d-flex是引导程序显示类：

.d-flex {
  display: -webkit-box!important;
  display: -ms-flexbox!important;
  display: flex!important;
}

在我的组件中，过敏设置为

allergies = ['dermatological allergies', 'dust', 'pollen', 'mold'];

显示

如图所示，该列表未正确中断，并且显示失真。当列表长度超过计算的列宽时，就会发生这种情况。如何将其显示为可以正常中断的列表？请让我知道我是否可以改善问题或是否可以提供更多信息。

Answer 1

对于angular，我建议您使用Angular中的Flex-layout。

包裹您的物品时，请使用row wrap

使用您的代码，您还可以执行以下操作：

<div class="d-flex">
  ...
  ...
    <div *ngFor="let allergy of allergies; let i = index" class="d-flex">
       ...
    </div>
  </div>
</div>

Answer 2

我想这就是你想要的：

<div class="d-flex">
  <span>Other:&nbsp;</span>
  <div>
    <ng-container *ngFor="let allergy of allergies; let i = index">
      <span *ngIf="allergy">{{ allergy }}</span><span *ngIf="i < allergies.length - 1">, </span>
      <span *ngIf="!allergy">None</span>
    </ng-container>
  </div>
</div>

这是一个stackblitz示例，显示了它的外观。

希望这对您有帮助...