html - 在Angular 6中显示逗号分隔的字符串
问题描述
我正在尝试遍历 Angular 6 中的逗号分隔字符串。
public getCategory(){
this.Jarwis.getCategorys().subscribe((data: Array<object>) => {
this.categorys = data;
console.log(this.categorys);
});
这是我的功能,它有一个控制台日志
(3) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 4, category_name: "Agriculture", sub_category_names: "Other Agriculture,Vineyards and Wineries,Greenhouses,Tree Farms and Orchards"}
1: {id: 5, category_name: "Automotive and Boat", sub_category_names: "Auto Repair and Service Shops,Car Dealerships,Marine/Boat Service and Dealers,Junk and Salvage Yards"}
2: {id: 13, category_name: "Beauty and Personal care", sub_category_names: "Massage,Tanning Salons,Spas,Hair Salons and Barber Shops"}
我可以在视图页面的帮助下显示类别名称
<li *ngFor='let category of categorys'>
<div>{{ category.category_name }}</div>
</li>
但是我怎样才能像这样在不同的 div 中显示 sub_category_names
<div> subcategory_name1 </div>
<div> subcategory_name2 </div>
请帮忙
解决方案
您可以使用自定义管道来拆分数组:
@Pipe({
name: 'splitComma'
})
export class SplitCommaStringPipe implements PipeTransform {
transform(val:string):string[] {
return val.split(',');
}
}
并像这样使用它:
<div *ngFor="let subcategory of category.sub_category_names|splitComma">
{{subcategory}}
</div>
推荐阅读
- java - 当片段膨胀时,导航抽屉启动未知活动
- azure - 转发请求时的 API 管理服务 ClientConnectionFailure
- python - 如何保存给定名称(作为字符串)的变量列表?
- python - 在 Python 中创建一个新文件,其中包含两个数据帧上的常见匹配项
- pyspark - 在 Dataproc 中运行 PySpark 时出现 ModuleNotFoundError
- batch-file - 为什么调用 echo 输出到文件时结果会加倍?
- svn - svnlook E720123 无法打开文件 '.....\local SVN repo\format'
- java - 将由字符组成的网格输入到双精度数组中
- c# - 重命名操作被取消或无效
- python - 将 sklearn hasrsine 输出解释为公里