Пока я использую " | orderBy : ['id'];" в моем шаблоне я получал следующую ошибку. Мой проект в Ionic 3 с ленивой загрузкой.
Ionic 3 ленивые загрузочные трубы
Ответы (3)
В Angular 2+ нет встроенного orderBy, как в Angular 1. Вы должны реализовать его самостоятельно, а затем добавить его в массив провайдеров из модулей, где вы будете его использовать.
Официальное объяснение из документа Angular:
В Angular нет ни FilterPipe, ни OrderByPipe по причинам, описанным в Приложении к этой странице.
Angular не предоставляет каналы для фильтрации или сортировки списков. Разработчики, знакомые с AngularJS, знают их как filter и orderBy. Аналогов в Angular нет.
Это не оплошность. Angular не предлагает такие пайпы, потому что они плохо работают и препятствуют агрессивной минимизации. И filter, и orderBy требуют параметров, которые ссылаются на свойства объекта. Ранее на этой странице вы узнали, что такие каналы должны быть нечистыми и что Angular вызывает нечистые каналы почти в каждом цикле обнаружения изменений.
Вы должны создать собственный @Pipe:
Посмотрите на этот вопрос для разрешения.
Так что да, в Angular 2+ вам нужно писать/использовать сторонний канал, и, как указал Кристиан, нет «встроенного» порядка. Как только вы добавите свой канал в свой проект, использовать его в вашем лениво загруженном модуле довольно просто:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FeedPage } from './feed.page';
import { TimeAgoPipe } from '../../pipes/time-ago.pipe';
import { ReversePipe } from '../../pipes/reverse.pipe';
@NgModule({
declarations: [
FeedPage,
TimeAgoPipe,
ReversePipe
],
imports: [
IonicPageModule.forChild(FeedPage),
]
})
export class FeedPageModule {}
А затем внутри вашей страницы (в этом примере мой feedPage):
<ion-content>
<ion-card *ngFor="let item of feedItems | async | reverse">
<ion-item>
<h2>{{ item.username }}</h2>
<p>{{ item.updatedAt | timeAgo }}</p>
</ion-item>
<ion-card-content>
</ion-card-content>
</ion-card>
</ion-content>