Как заказать массив в Angular 2 - PullRequest
Новая
       26

Как заказать массив в Angular 2

0 голосов
/ 29 июня 2018

У меня есть приложение ionic 2 и старая версия angularjs, поэтому по умолчанию у него нет канала заказа, поэтому у меня есть такой массив 

  <div *ngFor="let boatBooking of boatBookings" style="padding: 0px; margin:0px;">
  <ion-item>

        <ion-icon *ngIf="boatBooking.status !== 3" name="boat" item-left></ion-icon>
        <h3 *ngIf="boatBooking.status !== 3">{{ boatBooking.boat.name }}</h3>
        <p *ngIf="boatBooking.status !== 3"><small><strong>{{ boatBooking.date | date: 'dd/MM/y' }}</strong></small></p>

        <ion-icon *ngIf="boatBooking.status === 3" style="color:#d0d0d0!important" name="boat" item-left></ion-icon>
        <h3 *ngIf="boatBooking.status === 3" style="color:#d0d0d0!important">{{ boatBooking.boat.name }}</h3>
        <p *ngIf="boatBooking.status === 3" style="color:#d0d0d0!important"><small><strong>{{ boatBooking.date | date: 'dd/MM/y' }}</strong></small></p>   

        <ion-note *ngIf="boatBooking.status !== 3" item-end><div style="background:#f53d3d;" class="ppoints">-{{ boatBooking.boat.pointsPerDay }} </div></ion-note>
        <ion-note *ngIf="boatBooking.status === 3" item-end><div style="background:#ddd4d4; color:#848484" class="ppoints">0</div></ion-note>          
  </ion-item>
  </div>

получение данных из firebase с версией angularfire 2 (я знаю, что весь код устарел, но не могу обновить в данный момент)

У меня есть метка времени на лодке. Бронирование:

boatBooking.timestamp и хотите отсортировать пользовательскую трубу по ширине или ширине массива, что-то искали в Google, но не нашли ни одной такой трубы.

поэтому мой вопрос: как заказать трубу ширины массива с помощью boatBooking.timestamp? (отметка времени указывается в миллисекундах)

вот код массива 

      this.boatService.getUserBookings(this.member['$key']).subscribe(boatBookings => {

    this.boatBookings = [];
    boatBookings.forEach(boatBooking => {
      this.boat = this.boatService.getBoat(boatBooking.boatId);
      this.boatService.getBoat(boatBooking.boatId).first().subscribe(boat => {
        this.boatBookings.unshift(Object.assign(boatBooking, { boat }));
      });
    });

  });

Ответы [ 2 ]

0 голосов
/ 29 июня 2018

Угловая документация настоятельно рекомендует не использовать трубы в качестве сортировочных устройств.

Фильтрация и особенно сортировка - дорогостоящие операции. Пользовательский интерфейс может значительно ухудшиться даже для списков среднего размера, когда Angular вызывает эти методы канала много раз в секунду. filter и orderBy часто использовались в приложениях AngularJS, что приводило к жалобам на медленную работу самого Angular. Это обвинение справедливо в том смысле, что AngularJS подготовил эту ловушку производительности, предложив в первую очередь filter и orderBy.

...

Команда Angular и многие опытные разработчики Angular настоятельно рекомендуют перенести логику фильтрации и сортировки в сам компонент. Компонент может предоставлять свойство FilterHeroes или sortedHeroes и контролировать, когда и как часто следует выполнять вспомогательную логику. Любые возможности, которые вы могли бы поместить в канал и совместно использовать в приложении, можно записать в службу фильтрации / сортировки и внедрить в компонент.

Трубы скорее используются для обработки элементов массивов один за другим. Вы можете использовать каналы в верхнем или нижнем регистре или применять любые виды преобразования к элементам массива.

Как рекомендовано в Angular doc, я бы предпочел перейти на программный подход и переместить сортировку в компоненте, используя функциональность упорядочения Javascripts.

Для полного обсуждения, пожалуйста, прочитайте это сообщение стека , которое кажется довольно подробным.

Короткий ответ будет: 

boatBookings.sort()
boatBookings.sort(function(a,b){
  return new Date(b.date).getDate() - new Date(a.date).getDate();
});

А для тех из вас, кто в ES 6, это выглядело бы так: 

boatBookings.sort()
boatBookings.sort((a,b) => new Date(b.date).getDate() - new Date(a.date).getDate())

После сортировки массива вы можете передать его в HTML.

0 голосов
/ 29 июня 2018

Создайте свой канал, который преобразует массив, используя функцию сортировки Vanilla. 

import { Pipe } from "angular2/core";

@Pipe({
  name: "sort"
})
export class TsSortPipe {
  transform(array: Array<any>, args: string): Array<any> {
    array.sort((a: any, b: any) => {
      if (a.timestamp < b.timestamp) {
        return -1;
      } else if (a.timestamp > b.timestamp) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

Edit:

используйте его в html, как показано ниже

<div *ngFor="let boatBooking of boatBookings | sort" style="padding: 0px; margin:0px;">

...