2016-08-08 5 views
0

Ich habe eine Array Liste der Elemente:Zwei Ebene der Elemente in einer Array-Liste in ionischen 2

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

Ich mag Kategorien auf diese Liste und Filter auf der Basis hinzufügen, zum Beispiel

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

auch, wie würde ich den ngFor Code ändern die Katze

<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); 
    } 

Antwort

2

wählen Wenn Sie Kategorien hinzufügen möchten, dann items Array würde wie folgt aussehen:

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'} 
      ] 
    } 
]; 

Und Sie zwei verschachtelte *ngFor verwenden können die items Array wie folgt zu drucken:

<ion-list no-lines> 
    <ion-item *ngFor="let item of items" (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> 

finden Sie den vollständigen Code in diesem working plunker.


UPDATE:

auf der Seite zu öffnen, wie würde ich filtern, welche Kategorie angezeigt wird? Also, Ich würde auf die Artikel-Seite schieben und nur die Artikel nur für diese Kategorie anzeigen möchten.

Das könnte leicht mit einem custom Pipe erreicht werden. Ich habe die Plunker aktualisiert, so jetzt der Ansicht wie folgt aussieht:

<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> 

Die Tasten in der ersten <ion-item></ion-item> wird es uns ermöglichen, auszuwählen, welche Kategorie wir (unter Verwendung einer neuen Eigenschaft im Typoskript Code private selectedCategoryId : number; zeigen wollen, aber die ganze Magie wird von dieser Codezeile getan

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

Es wir ein eigenes Rohr in der Schleife nur verwenden, schließen jene Kategorien, deren id entspricht dem selectedCategoryId Sie können sehen, dass im CategoryFilter Code:.

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); 
    } 
} 

Ich weiß nicht, was Sie erreichen wollen, aber wenn Sie nicht über die Tasten zeigen möchten, Sie könnten nur die selectedCategoryId im constructor der Seite gesetzt. Auch hier finden Sie diesen Code in this plunker.

+0

Beim Öffnen der Seite, wie würde ich filtern, welche Kategorie angezeigt wird? Also, würde ich auf die Artikel Seite drücken und wollen nur ist zeigen die Artikel nur für diese Kategorie

category 1
category 2
CarlRyds

+0

Ich habe die Antwort aktualisiert, hoffe das hilft :) – sebaferreras

+0

Sorry, ich habe mich nicht sehr gut erklären. Ich möchte die Schaltflächen, die Sie auf einer separaten Seite hinzugefügt haben, und Sie klicken darauf, und es wird auf die Seite mit den Elementen und nur die Kategorie angezeigt, auf die der Benutzer geklickt hat. – CarlRyds

Verwandte Themen