OrderBy Pipe не работает с массивом объектов в angular 4?

У меня есть массив объектов, и я хочу отсортировать их по размеру, который является атрибутом объекта. Объект состоит из {имя, размер}. Я хочу отсортировать элементы по размеру.

оказание услуг:

search(term: string): Observable<Array<Object>> {
  let apiURL = `${this.apiRoot}?search=${term}`;
  return this.http.get(apiURL)
           .map(res => {
             return res.json().results.map(items => {
               return {name: items.name, population: items.population};
             });
           });
}

составная часть:

 ngOnInit() { 
  this.myshared.getSaveBtnStatus().subscribe(data => this.isSuccess = data);
    this.searchField = new FormControl();
    this.searchField.valueChanges
    .debounceTime(400)
    .distinctUntilChanged()
    .switchMap(term => this.myservice.search(term))
    .subscribe(value => {
      this.results = value;
      console.log(this.results);
    }
    );

HTML:

<ul class="list-group">
<li class="list-group-item"  *ngFor="let items of results">
{{items.name | orderBy : ['population'] }}
</li>
</ul>

angular angularjs-orderby
person Tarik Sahni    schedule 20.07.2017    source источник
comment
Angular2+ не имеет OrderByPipe angular.io/guide/pipes#no-filter-pipe   -  person Harry Ninh    schedule 20.07.2017
comment
Angular не предоставляет трубу orderBy из коробки.   -  person Pankaj Parkar    schedule 20.07.2017

Ответы (1)


arrow_upward
2
arrow_downward

В Angular 2+ нет порядка по каналу. Но очень легко построить его для того, что вы хотите.

Вот простая реализация канала для достижения того, что вы хотите

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "orderBy"
})
export class OrderByPipe implements PipeTransform {

  transform(value: any[], property: any, descending?: boolean): any {
    if (!value || value.length) {
      return value;
    }

    value.sort((first: any, second: any): number => {
        return first[property] > second[property] ? 1 : -1;
    });

    if (descending) {
      return value.reverse();
    }

    return value;
  }
}
person kodebot    schedule 20.07.2017