Question

我正在使用ngFor来为我的选择填充选项。

<select>
  <option *ngFor='let item of items; let i = index, [value]='item.name',)> {{ item.label }} </option>
</select>

我想在某个选项之后添加一个分隔线。像这样

Item1
Item 2
-- Divider --
Item 3

我已经通过使用索引显示了分隔线

<option *ngFor='let item of items; let i = index, [value]='item.name',)> {{ item.label }} {{ i == 2 ? '----' : ''}}</option>

但是我似乎无法完全理解它。
关于如何做到这一点的任何提示？同样，关于如何使分隔线比---更好的建议也将不胜感激。

谢谢！

Answer 1

在*ngFor元素上使用<ng-container>。然后，您可以为每个数组项添加多个子元素。

示例：

<select>
  <ng-container *ngFor="let item of items;">
    <option [value]="item.value">{{item.name}}</option>
    <option *ngIf="item.name === 'foobar'" disabled="disabled">----</option>
  </ng-container>
</select>

Angular-如何使用ngFor在选择选项之间添加分隔线？

1 个答案: