2016-06-01 9 views
2

У меня есть страница с одним списком из файла JSON. Что я хочу сделать, это добавить заказ по функциональности. Я пока не понимаю, нужно ли мне использовать @Pipe или если есть более простой способ. Я планирую сделать это на модальной странице. Заранее благодарю за любую помощь. modalpage.html:Список заказа 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 
    ); 
    }  
} 

ответ

2

Angular2 не обеспечивает OrderBy фильтр (теперь «труба»), как angula r 1 делает.

Угловой не поставляется с трубами для фильтрации или сортировки списков. Разработчики, знакомые с Angular 1, знают это как фильтр и orderBy. Там нет эквивалентов в угловых 2.
относятся: https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe

Вам нужно отсортировать элементы в компоненте. Лучший вариант всегда сортирует их на стороне сервера, но если вы знаете, что есть только несколько элементов или вы действительно хотите сортировать на стороне клиента, вы можете использовать метод array.sort().

Примеры и документация:

Вы сказали, что у вас есть список в файле формата JSON, так это постоянные данные, не так ли?
Посмотрите на следующее: Sorting with map
Я думаю, что это будет лучший вариант для вас.