Html 以角6显示逗号分隔的字符串

我试图在Angular 6中循环一个逗号分隔的字符串

public  getCategory(){
    this.Jarwis.getCategorys().subscribe((data:  Array<object>) => {
    this.categorys  =  data;
    console.log(this.categorys);
});

在的帮助下，我可以在查看页面中显示类别名称

<li *ngFor='let category of categorys'>
  <div>{{ category.category_name }}</div>
</li>

但是我如何才能像这样在不同的div中显示sub_category_名称呢

<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>

---

可以使用自定义管道拆分阵列：

@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>

---

在html中使用以下代码：

<li *ngFor='let category of categorys'>
  <div>{{ category.category_name }}</div>
  <div *ngFor="let subCategory of category.sub_category_names?.split(',')">
     {{ subCategory }}
  </div>
</li>

---

在html中使用以下代码：

<li *ngFor='let category of categorys'>
  <div>{{ category.category_name }}</div>
  <div *ngFor="let subCategory of category.sub_category_names?.split(',')">
     {{ subCategory }}
  </div>
</li>

---

也许你可以用一个额外的*ngFor来尝试这种方法

<li *ngFor='let category of categorys'>
    <div *ngFor="let subCategory of (category.sub_category_names.split(','))">{{ subCategory }}</div>
</li>

---

也许你可以用一个额外的*ngFor来尝试这种方法

<li *ngFor='let category of categorys'>
    <div *ngFor="let subCategory of (category.sub_category_names.split(','))">{{ subCategory }}</div>
</li>

---

还可以在返回数据时拆分子类别。然后在子类别上使用*ngFor。在ES6中，这将如下所示：

this.categories = data.map((e => {
  return {
     ...e,
     sub_category_names: e.sub_category_names.split(',')
  }
}));

顺便说一句，category的复数形式是categories

---

还可以在返回数据时拆分子类别。然后在子类别上使用*ngFor。在ES6中，这将如下所示：

this.categories = data.map((e => {
  return {
     ...e,
     sub_category_names: e.sub_category_names.split(',')
  }
}));

顺便说一句，category的复数形式是categories

---

您可能需要将子类别名称更改为数组。您可能需要将子类别名称更改为数组。我不建议您这样做。特别是对于更复杂的函数。。。它将在每个变更检测周期执行。管道解决方案更有效@Andrew change detection仅在类别属性发生更改时才会触发。在这种情况下，将永远不会触发更改检测，因为没有任何事件会更改categorys属性。再次，如果categorys属性将发生更改，那么显然它将重新渲染并使用管道或此处使用的任何东西。我正在从Angular 2开发ChangeDetection，这段代码在任何情况下都是有效的，不会引起任何问题。你可以看到我在这里的意思：打开控制台，看看split被调用了多少次。同时单击按钮“无任何更改”，然后查看发生了什么！问题是angular不知道split方法返回的内容与它每次实际返回一个新数组几乎相同，因此它必须调用它。我不建议这样做。特别是对于更复杂的函数。。。它将在每个变更检测周期执行。管道解决方案更有效@Andrew change detection仅在类别属性发生更改时才会触发。在这种情况下，将永远不会触发更改检测，因为没有任何事件会更改categorys属性。再次，如果categorys属性将发生更改，那么显然它将重新渲染并使用管道或此处使用的任何东西。我正在从Angular 2开发ChangeDetection，这段代码在任何情况下都是有效的，不会引起任何问题。你可以看到我在这里的意思：打开控制台，看看split被调用了多少次。同时单击按钮“无任何更改”，然后查看发生了什么！问题是angular不知道split方法返回的内容与它每次实际返回一个新数组几乎相同，所以它必须调用它。