Блог

Мне нужно отобразить мои категории и подкатегории в таблице.

Итак, у меня есть объект с категориями

   cats = [
    {
      "id": "1",
      "parent_id": 'root',
      "category": "Dress"
    },
    {
      "id": "17",
      "parent_id": "1",
      "category": "Dress 2"
    },


    {
      "id": "19",
      "parent_id": "1",
      "category": "Men"
    },
    {
      "id": "30",
      "parent_id": "19",
      "category": "Shorts 2"
    },
    {
      "id": "31",
      "parent_id": "19",
      "category": "Shorts"
    }
  ]
 

OnInit Мне нужно отобразить категории, где parent_id является корневым

И при нажатии, например, на категорию одежды, мне нужно показать дочерние категории (где parent_id равно 1)

Это таблица

 <div class="row">
  <div class="col-md-12">
    <table class="bootstrap table-striped">
      <tr>
        <th>Category Name</th>
      </tr>
      <tr *ngFor="let cat of cats">
        <td>
          <a>{{ cat.category }}</a>
        </td>
      </tr>
    </table>
  </div>
</div>
 

Что мне нужно использовать? может быть, какой-то фильтр? У меня нет идеи, и я ничего не нашел

Спасибо!

Создайте список (например: filteredList) для хранения отображаемых данных. Измените данные списка фильтрации в соответствии с выбранной категорией.

 filteredList = [];

ngOnInit(){
this.filterByCategory('root')
}

filterByCategory(categoryId){
    this.filteredList = this.cats.filter(cat => cat.parent_id == categoryId)
}
  
 

Здесь функция фильтра вернет массив элементов, который будет удовлетворять условию («cat.parent_id == CategoryID»)

Теперь обновите шаблон, чтобы отразить изменения

 <div class="row">
<div class="col-md-12">
    <table class="bootstrap table-striped">
    <tr>
        <th>Category Name</th>
    </tr>
    <tr *ngFor="let cat of filteredList">
        <td>
        <a (click)="filterByCategory(cat.id)">{{ cat.category }}</a>
        </td>
    </tr>
    </table>
</div>
</div>