イオン2の配列リストの項目の2つのレベル

Question

私はアイテムの配列リストを持っている：

items = [ 
    {id: '1', title: 'item 1'}, 
    {id: '2', title: 'item 2'}, 
    ] 

私はそれに基づいて、このリストとフィルタにカテゴリを追加したい、例えば

-items 
-- cat1 
--- item 1 
--- item 2 
-- cat2 
--- item 1 
--- item 2 
-- cat3 
--- item 1 
--- item 2 

はまた、どのように私はあなたのそして、あなたがカテゴリを追加したい場合は、猫

<ion-list> 
    <ion-item *ngFor="let item of items" (click)="clicked($event, item)"> 
    <h2>{{item.title}}</h2> 
    </ion-item> 
</ion-list> 



    clicked (event, item){ 
    console.log(item.title); 
    } 

Answer 1

を選択するために、ngForコードを変更します3210配列は次のようになります。

this.items = [ 
    { 
    id: 1, 
    title: 'Category 1', 
    items : [ 
       {id: 1, title: 'item 1'}, 
       {id: 2, title: 'item 2'} 
      ] 
    }, 
    { 
    id: 2, 
    title: 'Category 2', 
    items : [ 
       {id: 3, title: 'item 3'}, 
       {id: 4, title: 'item 4'} 
      ] 
    }, 
    { 
    id: 3, 
    title: 'Category 3', 
    items : [ 
       {id: 5, title: 'item 5'}, 
       {id: 6, title: 'item 6'} 
      ] 
    } 
]; 

そして、あなたは、このようitems配列を印刷するには2つの入れ子*ngForを使用することができます。

​​

はこのworking plunkerで完全なコードを見つけてください。

---

UPDATE：私は示されているカテゴリフィルタリングする方法をページを開くには

？だから、 私はアイテムページにプッシュして、そのカテゴリーの のアイテムだけを表示したいと思っています。

これは簡単にcustom Pipeを使用することで実現できました。 、

<ion-list> 
    <ion-item> 
     <button (click)="showCategory(1)">Show Cat 1</button> 
     <button (click)="showCategory(2)">Show Cat 2</button> 
     <button (click)="showCategory(3)">Show Cat 3</button> 
     <button (click)="showCategory(-1)">Show All</button> 
    </ion-item> 
    </ion-list> 
    <ion-list no-lines> 
    <ion-item *ngFor="let item of (items | categoryFilter:selectedCategoryId)" (click)="clicked($event, item)" > 
     Title: {{ item.title }} - Id: {{ item.id }} 
     <p *ngFor="let subitem of item.items" no-lines> 
     <span>Title: {{ subitem.title }} - Id: {{ subitem.id }}</span> 
     </p> 
    </ion-item> 
    </ion-list> 

最初<ion-item></ion-item>のボタンは、私たちはtypescriptですコードprivate selectedCategoryId : number;で新しいプロパティを使用して（見せたいどのカテゴリを選択できるようになります：私は今、ビューは次のようになりますので、plunkerを更新しましたしかし、すべての魔法は我々だけにカスタムパイプを使用してあり

*ngFor="let item of (items | categoryFilter:selectedCategoryId)" 

がループに含めるのコード行で行われているその id selectedCategoryIdに一致しますが CategoryFilterコードでそれを見ることができますそれらのカテゴリ：。

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ name: 'categoryFilter' }) 
export class CategoryFilter implements PipeTransform { 
    transform(items: any[], selectedId: number): any { 
     if(selectedId === -1) 
      return items; 
     return items.filter(item => item.id === selectedId); 
    } 
} 

私はあなたが達成したいことはわかりませんが、ボタンを表示したくない場合は、ページのconstructorにselectedCategoryIdを設定するだけです。繰り返しますが、コードはthis plunkerにあります。