typescript - Angular 2 のパイプを使ってオブジェクトのリストをソートする方法

私はカスタム型の配列をソートするパイプを作ろうとしています。

// custom-object.ts
export class CustomObject {
    constructor(
        public someString: string,
        public someNumber: number
    ) {}
}

私のHTMLには次のようにあります:

// custom-object-form.component.ts
<div class="form-group">
    <label for="cricos_course_code">Object: </label>
    <select class="form-control" required [(ngModel)]="model.someString">
        <option *ngFor="#object of (customObjects | sortArrayOfCustomObjects)" [value]="object.someString">{{object.someString}}</option>
    </select>
</div>

それからパイプのコード:

// sort-custom-object.pipe.ts
import {Pipe, PipeTransform} from 'angular2/core';
import {CustomObject} from '../custom-object';

@Pipe({name: 'sortArrayOfCustomObjects'})
export class SortArrayOfCustomObjectsPipe implements PipeTransform {
  transform(arr:Array<CustomObject>): any {
    return arr.sort((a, b) => {
      if (a.someString > b.someString) {
        return 1;
      }
      if (a.someString < b.someString) {
        return -1;
      }
      // a must be equal to b
      return 0;
    });
  }
}

今、コンソールでエラーが出ています:

EXCEPTION: TypeError: Cannot read property 'sort' of undefined in [(customObjects | sortArrayOfCustomObjects) in FormComponent@7:24]

回答 #1

あなたの限られた情報に基づいて、私はあなたが次のものを望んでいると考えています。

@Pipe({name: 'sortArrayOfCustomObjects'})
export class SortArrayOfCustomObjectsPipe implements PipeTransform {

  transform(arr: CustomObject[], args: any): CustomObject[]{
    return arr.sort((a, b) => {
      if (a.p1 > b.p1 || a.p2 < b.p2) {
        return 1;
      }
      if (a.p1 < b.p1 || a.p2 > b.p2) {
        return -1;
      }
      return 0;
    });
  }
}

これはまず p1 でオブジェクトを並べ替え、その後 p2 で並べ替えます。例えば。

{p1: 'AA', p2: 3},
{p1: 'CC', p2: 2},
{p1: 'BB', p2: 5},
{p1: 'BB', p2: 1},
{p1: 'AA', p2: 2},
{p1: 'DD', p2: 4}

に並べ替えられる

{p1: 'AA', p2: 3},
{p1: 'AA', p2: 2},
{p1: 'BB', p2: 5},
{p1: 'BB', p2: 1},
{p1: 'CC', p2: 2},
{p1: 'DD', p2: 4}

これはあなたのコメントに基づいています:

私は、p1: 文字列、p2: 数値などのプロパティを含むオブジェクトの配列を持っています。フォームでは、p1のリストをアルファベット順に表示し、p2のリストを降順に表示する2つのセレクトフィールドを持ちたいです。

使用は〜となるでしょう

*ngFor="#item of (items | sortArrayOfCustomObjects)"

更新

現在受け取っているエラーに対しては、ガードを使用して配列内のundefined値を防ぐようにしてください。

transform(arr: CustomObject[], args: any): CustomObject[]{
  if(!arr){ return; }
  ...
}