javascript - ionic 2 订单列表

Question

我有一个页面，其中包含 JSON 文件中的一个列表。我想做的是按功能添加订单。我还不明白是否需要使用@Pipe 或者是否有更简单的方法。 我打算在模态页面中完成它。 预先感谢任何帮助。 modalpage.html:

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

列表.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>

列表.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
    );
  }    
}

Answer 1

Angular2 不像 Angular 1 那样提供 orderBy 过滤器(现在是“管道”)。

Angular does not ship with pipes for filtering or sorting lists. Developers familiar with Angular 1 know these as filter and orderBy. There are no equivalents in Angular 2.
refer: https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe

您需要对组件中的项目进行排序。最好的选择始终是在服务器端对它们进行排序，但如果您知道只有几个项目或者您确实想在客户端进行排序，则可以使用 array.sort() 方法。

示例和文档:

• http://www.w3schools.com/jsref/jsref_sort.asp
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

您说您的列表位于 JSON 文件中，所以它是持久数据，不是吗？
看看这个:Sorting with map
我认为这将是您的最佳选择。