how to get the subcategory of a click category using angular?-CodePudding

I have two table categories and subcategories, I want to display the subcategories according to category click, I created the function filterSoucategories(category) which returns the table of subcategories click, but for me it returns empty subcategory table I don't know why?

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.log(this.souscategories)
    });
  }

filter.component.html

<div > 
    <div >
        <button >All</button>&nbsp;
        <button  *ngFor="let category of categories" (click)="filterSoucategories(category)">----{{ category.name }}</button>
    </div> 
</div> 
<div > 
    <a href="#" > 
    <div  *ngFor="let souscategory of Allsouscategories">
        <div  data-animate="fadeInUp">
            <div >
                <img src="https://thumbs.dreamstime.com/z/belle-forêt-tropicale-à-l-itinéraire-aménagé-pour-amateurs-de-la-nature-de-ka-d-ang-36703721.jpg"  style="width: 240px;height: 240px" /> 
            </div>
            <div >
                <h5>{{ souscategory.name }}</h5>
                <div >
                    <a href="#" ><span ></span></a>
                </div>   
                <div >
                    <a href="#" ><span ></span></a>
                </div> 
            </div> 
        </div>
    </div> 
    </a>
  </div>

CodePudding user response：

Change your filterSoucategories to:

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