Отображение разделенной запятой строки в Angular 6

Question

Я пытаюсь перебрать строку через запятую в 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>

Но как я могу отображать имена sub_category_names в разных элементах div так же, как это

<div> subcategory_name1 </div>
<div> subcategory_name2 </div>

Пожалуйста, помогите

Answer 1

Вы также можете разделить подкатегории при возврате данных.А затем используйте *ngFor для подкатегорий.В ES6 это будет выглядеть так:

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

кстати.множественное число категории есть категории

https://stackblitz.com/edit/js-rkkyjs

Answer 2

Используйте следующий код в 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>

Answer 3

Может быть, вы можете попробовать этот способ, используя дополнительный * ngFor

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

https://stackblitz.com/edit/angular-a4s1bq

Answer 4

Вы можете использовать пользовательский канал для разделения массива:

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