我有兩個表categories，subcategories我想subcategories根據category點擊顯示，我創建了filterSoucategories(category)回傳表的函式subcategories的函式，但對我來說它回傳空的子類別表我不知道為什么？
過濾器組件.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>
<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>
uj5u.com熱心網友回復：
將您更改filterSoucategories為：
filterSoucategories(category:any){
this.souscategories = this.Allsouscategories.filter( item =>
item.category_id == category.id
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/463103.html
標籤：有角度的