ngFor实现时，如何让复选框垂直显示而不是水平显示？

Question

我创建了这个复选框列表：

使用这个简单的 html 代码：

  <label  *ngFor="let order of options">
    <input type="checkbox" >
    {{order}}
  </label>

以及以下打字稿代码：

options: string[] = [
    "1 jour",
    "2-3 jours",
    "4-5 jours",
    "Plus d'une semaine",
    "Plus de 15 jours",
    "Un mois et plus"
  ];

我尝试使用

垂直显示复选框（即：彼此堆叠而不是彼此相邻）

< br >

标签。但是，它没有用。
有什么帮助吗？

Answer 1

使用 *ngFor 和 ng-container 并在里面插入 <br> 标签。

<ng-container *ngFor="let order of options">
  <label>
    <input type="checkbox" >
    {{order}}
  </label>  
  <br>
</ng-container>

Answer 2

尝试将其包装在 div 中并使用 Flex display 和列。

<div class="wrapper">
  <label *ngFor="let order of options">
    <input type="checkbox" >
    {{order}}
  </label>  
</div>

并添加 css class.

.wrapper {
  display: flex;
  flex-direction: column;
}

尝试运行下面的代码片段来说明您正在寻找的答案，html 与 ngFor 将在 DOM 中创建的内容非常相似.

.wrapper {
display: flex;
flex-direction: column;
}

<div class="wrapper">
  <label>
    <input type="checkbox" >
    1
  </label>  
  
  <label>
    <input type="checkbox" >
    1
  </label>  
<div>

Answer 3

不需要额外的样式，也不需要任何分页符。只需将 *ngFor 结构指令移动到封闭的 div 标记中，使每个项目都换行，如

<div *ngFor="let order of options">
    <label>
        <input type="checkbox" >
        {{order}}
    </label>
</div>

一个div是一个块元素，占据容器宽度的100%。

How to make checkboxes displayed vertically instead of horizontally when they are implemented with ngFor?