Angular 2 + ionic 2: Filterfunktion abhängig von * ngFür eine andere Seite

Question

Ich habe eine einfache Ion-Liste und einen Filter, um die Elemente anzuzeigen, die einem bestimmten Schlüssel entsprechen: Wert; Ich weiß nicht, ob ich es richtig gemacht habe, wenn es einen besseren Weg gibt, sag es mir bitte.

list.html

<ion-content class="listPage"> 
    <button ion-item [ngClass]="{active: type =='all'}" (click)="filter('all')">all</button> 
    <button ion-item [ngClass]="{active: type =='red'}" (click)="filter('red')">red</button> 
    <button ion-item [ngClass]="{active: type =='blue'}" (click)="filter('blue')">blue</button> 

    <ion-list class="task-list"> 
     <button ion-item class="task-item" *ngFor="#item of list" [hidden]="isFilter(item.type)"> 
      <h2>{{item.title}}</h2> 
      <p>{{item.type}}</p> 
     </button> 
    </ion-list> 
</ion-content> 

LIST.JS

export class ListPage { 
    static get parameters() { 
    return [[NavController]]; 
    } 

    constructor(nav) { 
    this.nav = nav; 
    this.typeFilter = 'all'; 

    this.list = [ 
     { 
      "title": "Anastasia T. Benton", 
      "type": "red" 
     }, 
     { 
      "title": "Adena C. English", 
      "type": "blue" 
     }, 
    ] 
    } 



    filter(itemFilter) { 
     this.typeFilter = itemFilter; 
    } 

    isFilter(itemType) { 
     if (this.typeFilter == 'all') { 
      return false; 
     } else { 
      return itemType != this.typeFilter; 
     } 
    } 

} 

Bisher funktioniert es schön, zeigt es die richtigen Artikel Liste, wenn ich auf die Schaltfläche Korrespondent klicken.

Nun möchte ich diesen "Filter" auf ein Side-Menü, das auf app.js ist, setzen, aber dann funktioniert die Funktion nicht und ich weiß nicht, wie es zu beheben ist.

list.html

<ion-navbar *navbar> 
    <button menuToggle> 
    <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>List</ion-title> 
</ion-navbar> 

<ion-content class="listPage"> 
    <ion-list class="task-list"> 

     <button ion-item class="task-item" *ngFor="#item of list" [hidden]="isFilter(item.type)"> 
      <h2>{{item.title}}</h2> 
      <p>{{item.type}}</p> 
     </button> 

    </ion-list> 
</ion-content> 

APP.HTML

<ion-menu [content]="content"> 

    <ion-toolbar> 
    <ion-title>List Filter</ion-title> 
    </ion-toolbar> 

    <ion-content> 
    <ion-list> 
     <button ion-item [ngClass]="{active: type =='all'}" (click)="filter('all')">all</button> 
     <button ion-item [ngClass]="{active: type =='red'}" (click)="filter('red')">red</button> 
     <button ion-item [ngClass]="{active: type =='blue'}" (click)="filter('blue')">blue</button> 
     <button ion-item [ngClass]="{active: type =='orange'}" (click)="filter('orange')">orange</button> 
     <button ion-item [ngClass]="{active: type =='greene'}" (click)="filter('greene')">green</button> 
    </ion-list> 
    </ion-content> 
</ion-menu> 

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

APP.JS

//i know i need to do something here. about dependencies, but i can't figure out how :/ 

Auch würde Ich mag zeigen etwas (kann ein sein), wenn das Ergebnis vom Filter eine leere Liste ist.

Ich habe diese Woche begonnen, Ionic 2 und Angular 2 zu lernen, und ich kämpfe damit. Das einzige, was ich bisher über Angular weiß, habe ich von "Shaping up with Angular.js" von CodeSchool gelernt. Ich kenne bereits eine Menge über html5, scss, jQuery und einige Basen auf Javascript. Ich kenne das Typoskript noch nicht.

Entschuldigung dafür, dass ich kein Live-Beispiel habe, aber ich weiß nicht, wie man einen mit eckigen erstellt. Sonst würde ich es tun.

Danke für die Hilfe.

Answer 1

Sie möchten Ihre Listendatenverwaltung in einen Dienst verschieben.(Können Sie einen leeren Dienst mit ionic g provider service-name erzeugen)

Sie da so etwas wie folgt aussehen wird:

import {Injectable} from 'angular2/core'; 
import 'rxjs/add/operator/map';  

    @Injectable() 
    export class ListService {  

constructor() { 
this.typeFilter = 'all'; 
    this.list = [ 
     { 
      "title": "Anastasia T. Benton", 
      "type": "red" 
     }, 
     { 
      "title": "Adena C. English", 
      "type": "blue" 
     }, 
    ] 
    } 

    filter(itemFilter) { 
     this.typeFilter = itemFilter; 
    } 

    isFilter(itemType) { 
     if (this.typeFilter == 'all') { 
      return false; 
     } else { 
      return itemType != this.typeFilter; 
     } 
    } 
} 

In Ihrem @App Sie diesen Service in der Provider-Array injizieren:

import {ListService} from './providers/list-service/list-service' 


@App({ 
    templateUrl: 'build/app.html', 
    providers: [ListService] , 
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/ 
}) 
class MyApp { 

constructor(public listService: ListService) { 

... 

So, jetzt

können Sie listService in Ihrer App-Vorlage verwenden, wie:

<button ion-item [ngClass]="{active: type =='all'}" (click)="listService.filter('all')">all</button> 

Um diesen Dienst in Ihrer List @Page zu verwenden, müssen Sie ihn etwas anders injizieren; deklariere es nicht im Provider-Array; stattdessen tun Sie es einfach auf den Konstruktor:

export class ListPage { 
    static get parameters() { 
    return [[NavController, ListService]]; 
    } 

    constructor(nav, listService) { ... } 

Jetzt sind Sie bereit listService in Ihrer Liste Vorlage zu referenzieren, wie:

<button ion-item class="task-item" *ngFor="#item of listService.list" [hidden]="listService.isFilter(item.type)"> 

Wieder stellen Sie sicher, dass Sie nicht ListService an den Anbieter Array hinzufügen in ListePage; Dadurch wird eine zweite Instanz des Diensts erstellt, sodass Sie über zwei verschiedene Datensätze verfügen (einen für die App, einen für die Seite).