當我使用 angular 單擊按鈕時如何擁有所有子類別

Question

我有兩個表categories和subcategories ，我想根據category點擊顯示subcategories類別，我創建了 function filterSoucategories(category)它返回subcategories點擊表，它成功返回category點擊的subcategory類別，它all是按鈕不進入循環，我想當我點擊按鈕all顯示所有subcategory 。 我不知道該怎么做。

過濾組件.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 => 
        item.category_id == category.id
    );
}

過濾器.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> 

Answer 1

試試<button class="btn btn-primary" (click)="souscategories = Allsouscategories">All</button>&nbsp; 而不是<button class="btn btn-primary">All</button>&nbsp;