2016-06-01 22 views
2

Ich habe eine Seite mit einer Liste aus einer JSON-Datei. Was ich tun möchte, ist eine Reihenfolge der Funktionalität hinzuzufügen. Ich verstehe noch nicht, ob ich @ Pipe benutzen muss oder ob es einen einfacheren Weg gibt. Ich plane es in einer modalen Seite zu tun. Vielen Dank im Voraus jede Hilfe wird geschätzt. modalpage.html:Bestellliste ionic 2

<ion-toolbar danger> 
    <ion-buttons start> 
    <button (click)="close()"> 
     <ion-icon ios="ios-close" md="md-close"></ion-icon> 
    </button> 
    </ion-buttons> 
    <ion-title text-center> 
    Ajustes 
    </ion-title> 
    <ion-buttons end> 
    <button (click)="applyFilters()"> 
     <ion-icon ios="ios-checkmark" md="md-checkmark"></ion-icon> 
    </button> 
    </ion-buttons> 
</ion-toolbar> 
<ion-content padding class="rojo"> 
    <h2 text-center>Ordenar resultados por:</h2> 
</ion-content> 

modalpage.js

import {Page, NavController,ViewController} from 'ionic-angular'; 

@Page({ 
    templateUrl: 'build/pages/ajustes-listado/ajustes-listado.html', 
}) 
export class AjustesListadoPage { 
    static get parameters() { 
    return [[NavController],[ViewController]]; 
    } 

    constructor(nav, viewController) { 
    this.nav = nav; 
    this.viewCtrl = viewController; 
    } 

    close(data) { 
    this.viewCtrl.dismiss(data); 
    } 
    applyFilters(){ 
    console.log('aplicando filtros a la lista'); 
    this.close(); 
    } 
} 

list.html

<ion-navbar *navbar danger> 
    <ion-title text-center>Listado</ion-title> 
    <ion-buttons start *ngIf="buscar==false"> 
    <button (click)="search()"> 
     <ion-icon ios="ios-search" md="md-search"></ion-icon> 
    </button> 
    </ion-buttons> 
    <ion-buttons end> 
    <button (click)="options()"> 
     <ion-icon ios="ios-options" md="md-options"></ion-icon> 
    </button> 
    </ion-buttons> 
</ion-navbar> 
<ion-content class="listado"> 
     <ion-list [virtualScroll]="vets"> 
     <button ion-item text-wrap *virtualItem="let vet" (click)="goToDetails(vet)"> 
      <ion-avatar item-left> 
       <!-- <ion-img [src]="vet.img || defaultImg"></ion-img> --> 
       <img src="{{vet.img}}" onError="this.src='./files/gmaps.png';" /> 
      </ion-avatar> 
      <h2>{{vet.nombre}}</h2> 
      <p>Direccion: {{vet.direccion}}</p> 
     </button> 
    </ion-list> 
</ion-content> 

list.js

import {DetallesPage} from '../detalles/detalles'; 
import {OnInit} from '@angular/core'; 
import {Page, NavController, Platform, NavParams, Modal} from 'ionic-angular'; 
import {MiServicio} from '../../providers/mi-servicio/mi-servicio'; 
import {AjustesListadoPage} from '../ajustes-listado/ajustes-listado'; 

@Page({ 
    templateUrl: 'build/pages/listado/listado.html', 
    providers:[MiServicio] 
}) 
export class ListadoPage { 
    static get parameters() { 
    return [[NavController],[Platform],[MiServicio]]; 
    } 

    constructor(nav,platform, miServicio) { 
    this.nav = nav; 
    this.platform = platform; 
    this.miServ = miServicio; 
    this.ngOnInit(); 
    } 

    ngOnInit() { 
    this.miServ.getVets().subscribe(
     data => this.vets = data 
    ); 
    }  
} 

Antwort

2

Angular2 nicht die orderBy Filter bieten (jetzt "Rohr") wie Angula r 1 tut es.

Angular wird nicht mit Rohren zum Filtern oder Sortieren von Listen geliefert. Entwickler, die mit Angular 1 vertraut sind, kennen diese als Filter und orderBy. Es sind keine Mittel in Angular 2.
verweisen: https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe

Hier finden Sie die Artikel in Ihrer Komponente sortieren müssen. Die beste Option ist immer, sie auf der Serverseite zu sortieren, aber wenn Sie wissen, dass es nur wenige Elemente gibt oder Sie wirklich auf der Client-Seite sortieren möchten, können Sie die array.sort() -Methode verwenden.

Beispiele und Dokumentation:

Sie sagten, Sie die Liste in einer JSON-Datei, so dass es ein persistenten Daten sind es nicht wahr?
Werfen Sie einen Blick auf diese: Sorting with map
Ich denke, das wird die beste Option für Sie sein.