Ionic 3 ленивые загрузочные трубы

Пока я использую " | orderBy : ['id'];" в моем шаблоне я получал следующую ошибку. Мой проект в Ionic 3 с ленивой загрузкой. введите здесь описание изображения


person Jose G Varanam    schedule 18.05.2018    source источник
comment
Чтобы помочь вам, нам нужен код, который будет обрабатывать эту переменную.   -  person Ron Nabuurs    schedule 18.05.2018
comment
Пожалуйста, не добавляйте сообщение об ошибке в качестве изображения   -  person Suraj Rao    schedule 19.05.2018
comment
Поскольку я работал над производственной сборкой, довольно сложно разместить код, который использовался в производственной сборке, поскольку это ограничение моей компании. А также сроки выполнения задания как в одно и то же время. При поиске тоже не получил должного ответа. вот почему я опубликовал код ошибки, который поможет тем, кто столкнулся с той же проблемой на ionic 3.   -  person Jose G Varanam    schedule 21.05.2018


Ответы (3)


В Angular 2+ нет встроенного orderBy, как в Angular 1. Вы должны реализовать его самостоятельно, а затем добавить его в массив провайдеров из модулей, где вы будете его использовать.

Официальное объяснение из документа Angular:

В Angular нет ни FilterPipe, ни OrderByPipe по причинам, описанным в Приложении к этой странице.

Angular не предоставляет каналы для фильтрации или сортировки списков. Разработчики, знакомые с AngularJS, знают их как filter и orderBy. Аналогов в Angular нет.

Это не оплошность. Angular не предлагает такие пайпы, потому что они плохо работают и препятствуют агрессивной минимизации. И filter, и orderBy требуют параметров, которые ссылаются на свойства объекта. Ранее на этой странице вы узнали, что такие каналы должны быть нечистыми и что Angular вызывает нечистые каналы почти в каждом цикле обнаружения изменений.

person Christian Benseler    schedule 18.05.2018
comment
Я хотел бы знать, если angular2+ не имеет встроенного orderBy, то в моем обычном проекте ionic 3 (проект без ленивой загрузки) orderBy работает нормально. - person Jose G Varanam; 18.05.2018
comment
Очень странно, потому что официальный документ Angular объясняет, что нет встроенного канала порядка (angular. io/guide/pipes#встроенные-в-трубы) - person Christian Benseler; 18.05.2018

Вы должны создать собственный @Pipe:

Посмотрите на этот вопрос для разрешения.

person Matteo Ponzo    schedule 18.05.2018

Так что да, в 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>
person Sergey Rudenko    schedule 18.05.2018