angular - 在没有 optgroup 的下拉列表中分组 *ngFor 值
问题描述
如何在下拉选择中对没有 optGroup 的 *ngFor 数据进行分组。下面是我的 JSON 文件链接 JSON 数据
打字稿代码
getProducts() {
if (this.products.length < 1) {
this.productService.getProducts().subscribe(p => {
this.masterProductAttributeItems = p.MasterProductAttributeItems;
});
}
html代码
<select class="form-control input-sm">
<ng-container *ngFor="let thing of masterProductAttributeItems">
<option value="{{ thing.MasterProductAttributeItemId }}">
{{ thing.Name }}
</option>
</ng-container>
</select>
解决方案
由于您提供Name
的不是您提供的 JSON 独有的。在这里,所有名称都以“重量”的形式给出。所以我只是改变了这段代码
<option value="{{ thing.MasterProductAttributeItemId }}">
{{ thing.Name }}
</option>
至
<select class="form-control input-sm">
<ng-container *ngFor="let thing of masterProductAttributeItems">
<option value="{{ thing.MasterProductAttributeItemId }}">
{{ thing.MasterProductAttributeItem }}
</option>
</ng-container>
如需更多演示,请参阅此链接:
https://stackblitz.com/edit/angular-xamcuh?file=src%2Fapp%2Fapp.component.html
推荐阅读
- python - 在 Aplhabets 上定义轮廓
- android - 将地图转换为对象
- python - 标签编码 n 维分类值
- groovy - 在 Groovy 中循环遍历没有迭代器的对象
- android - LifecycleObserver 使用使用较新 API 的方法产生异常
- java - com.rengwuxian.materialedittext.MaterialEditText 无法转换为 android.view.ViewGroup
- batch-file - 尝试在 Windows 10 中使用 gnu awk 来拆分大型序列文件
- javascript - 如何在我的应用程序架构中确保有效的依赖关系图
- python - 在一组文件中搜索 input_from_user 词
- javascript - node-js 中的异步/等待获取