Как получить подкатегорию категории кликов с помощью angular?

У меня есть две таблицы categories и subcategories, я хочу отображать subcategories в соответствии с category кликом, я создал функцию filterSoucategories(category), которая возвращает таблицу subcategories клика, но для меня она возвращает пустую таблицу подкатегорий, не знаю почему?

filter.component.ts

souscategories:any = [];

  categories:any=[
    {id:1,  name:"emploi",                      slug:"emploi"                },
    {id:2,  name:"vehicule",                    slug:"auto-moto"             },
    {id:3,  name:"Immobilier",                slug:"vente-immobilier"      },
    {id:4,  name:"Multi Services",            slug:"multi-services"        },
    {id:5,  name:"Ventes Divers",               slug:"ventes-divers"         },
    {id:6,  name:"Informatique & Multimedia",   slug:"Informatique-ultimedia"},
    {id:7,  name:"Mariage",                   slug:"mariage"               },
    {id:8,  name:"Animaux",                   slug:"animaux"               } 
];

Allsouscategories = [
    {id:1     ,name:"offre-demploi",                         slug:"offre-demploi",              category_id:1},
    {id:2     ,name:"demande-demploi",                     slug:"demande-demploi",            category_id:1},
    {id:3     ,name:"demande de stage",                    slug:"demande de stage"  ,         category_id:1},
    {id:4     ,name:"freelance",                             slug:"freelance",                  category_id:1},
    {id:5     ,name:"formation-professionelle",            slug:"formation-professionelle",   category_id:1},
    {id:6     ,name:"bateau-jestki",                       slug:"bateau-jestki",                category_id:2},
    {id:7     ,name:"moto-2-route",                        slug:"moto-2-route",               category_id:2},
    {id:8     ,name:"voiture",                             slug:"voiture",                    category_id:2},
    {id:9     ,name:"velos",                                 slug:"velos",                      category_id:2},
    {id:10  ,name:"pieces-de-rechange",                  slug:"pieces-de-rechange",         category_id:2},
    {id:11  ,name:"appartement",                           slug:"appartement",                category_id:3},
    {id:12  ,name:"maison-et-villas",                      slug:"maison-et-villas",           category_id:3},
    {id:13  ,name:"bureau-blateau",                      slug:"bureau-blateau",             category_id:3},
    {id:14  ,name:"magazin-depot-hangar-cave",           slug:"magazin-depot-hangar-cave",  category_id:3},
    {id:15  ,name:"terrain-et-ferme-agricole",           slug:"terrain-et-ferme-agricole",  category_id:3},
    {id:16  ,name:"locations-vacances",                  slug:"locations-vacances",         category_id:3},
    {id:17  ,name:"colocation",                          slug:"colocation",                 category_id:3},
    {id:18  ,name:"studios",                               slug:"studios",                    category_id:3},
    {id:19  ,name:"autre-immobilier-vente-et-location",  slug:"autre-immobilier-vente-et-location", category_id:3},
    {id:20  ,name:"cours-de-soutien",                      slug:"cours-de-soutien",           category_id:4},
    {id:21  ,name:"services-divers",                       slug:"services-divers",            category_id:4},
    {id:22  ,name:"perdu-de-vue",                          slug:"perdu-de-vue",               category_id:4},
    {id:23  ,name:"meubles",                               slug:"meubles",                    category_id:5},
    {id:24  ,name:"electromenage",                       slug:"electromenage",              category_id:5},
    {id:25  ,name:"music",                               slug:"music",                      category_id:5},
    {id:26  ,name:"beauteé",                               slug:"beauteé",                    category_id:5},
    {id:27  ,name:"vitement",                              slug:"vitement",                   category_id:5},
    {id:28  ,name:"materiels-medicaux",                  slug:"materiels-medicaux",         category_id:5},
    {id:29  ,name:"articles-de-sport",                   slug:"articles-de-sport",          category_id:5},
    {id:30  ,name:"jeux-enfant",                           slug:"jeux-enfant",                category_id:5},
    {id:31  ,name:"echange",                               slug:"echange",                    category_id:5},
    {id:32  ,name:"articles-bebe",                       slug:"articles-bebe",              category_id:5},
    {id:33  ,name:"materieaux-equipement",               slug:"materieaux-equipement",      category_id:5},
    {id:34  ,name:"business-affaires",                   slug:"business-affaires",          category_id:5},
    {id:35  ,name:"voyages-vacances",                      slug:"voyages-vacances",           category_id:5},
    {id:36  ,name:"autre-vente",                           slug:"autre-vente",                category_id:5},
    {id:37  ,name:"telephone-portable",                  slug:"telephone-portable",         category_id:6},
    {id:38  ,name:"pc-bureau-pc-portable-tablette",      slug:"pc-bureau-pc-portable-tablette", category_id:6},
    {id:39  ,name:"materiel-informatique",               slug:"materiel-informatique",      category_id:6},
    {id:40  ,name:"jeux-video",                          slug:"jeux-video",                 category_id:6},
    {id:41  ,name:"appariel-photo",                      slug:"appariel-photo",             category_id:6},
    {id:42  ,name:"mariage",                               slug:"mariage",                    category_id:7},
    {id:43  ,name:"animaux",                               slug:"animaux",                    category_id:8},
];

  constructor() { }

  ngOnInit(): void {  
  }

  filterSoucategories(category:any){
    this.souscategories = this.Allsouscategories.filter((item:any) => {
      item.category_id == category.id;
      console.info(this.souscategories)
    });
  }

filter.component.html

<div class = "col-md-12 gallery-filter"> 
    <div class = "button-panel">
        <button class = "btn btn-primary">All</button>&nbsp;
        <button class = "btn btn-primary" *ngFor = "let category of categories" (click) = "filterSoucategories(category)">----{{ category.name }}</button>
    </div> 
</div> 
<div class = "row mix-grid thumbnails"> 
    <a href = "#" > 
    <div class = "col-md-3 col-xs-12" *ngFor = "let souscategory of Allsouscategories">
        <div class = "blog-item" data-animate = "fadeInUp">
            <div class = "blog-media">
                <img src = "https://thumbs.dreamstime.com/z/belle-for%C3%AAt-tropicale-%C3%A0-l-itin%C3%A9raire-am%C3%A9nag%C3%A9-pour-amateurs-de-la-nature-de-ka-d-ang-36703721.jpg" class = "img-responsive" style = "width: 240px;height: 240px" /> 
            </div>
            <div class = "blog-data">
                <h5>{{ souscategory.name }}</h5>
                <div class = "col-md-3 ">
                    <a href = "#" class = "btn btn-primary"><span class = "fa fa-edit"></span></a>
                </div>   
                <div class = "col-md-3 ">
                    <a href = "#" class = "btn btn-primary"><span class = "fa fa-times"></span></a>
                </div> 
            </div> 
        </div>
    </div> 
    </a>
  </div> 
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
23
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Измените свой filterSoucategories на:

filterSoucategories(category:any){
    this.souscategories = this.Allsouscategories.filter( item => 
        item.category_id == category.id
    );
}

Другие вопросы по теме