angular - Angular - 如何使用 ngFor 在选择选项之间添加分隔符?
问题描述
我正在使用 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>
但我似乎无法让它自己的路线。
关于如何做到这一点的任何提示?此外,任何关于如何拥有比 --- 更好看的分隔线的建议都将不胜感激。
谢谢!
解决方案
*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>
推荐阅读
- math - 负二项式回归假设检验
- java - Firebase Query 无法在 Xiaomi Redmi Y1 (7.1.2 OS) 中获取数据
- reactjs - 将 react-dnd 与 cytoscape.js 一起使用
- quartz.net-3.0 - Quartz.net:GetDefaultScheduler() 的类型
- android - 我正在使用 Android Studio 创建一个应用程序。我遇到的情况是我试图使用来自另一个活动的图像
- c# - 将长度为 n 的棒材最佳切割成 3 种可能 4 种尺寸中的任何一种
- angular - 带有授权标头的 Angular 7 http(发布)-> 错误 500
- mercurial - 如何在 hgrc 中使用本地路径到硬盘上的存储库?
- sql - 为数据表分配 TVP 值
- java - java - 如何在java spring框架中绑定数组字段?