2017-03-09 8 views
2

イオン2を使用していて、*ngFor=""で配列をソートしようとしています。角2のパイプ引数が失敗しました

は、悲しいことに、それは私にエラーをスローし、私はなぜか、ここにあるrelated post

オブジェクトの私の配列は次のようになります。this私のパイプはこのようになります

import {Injectable, Pipe} from '@angular/core'; 
import * as _ from 'lodash'; 

@Pipe({ name: 'order-by' }) 
export class OrderByPipe { 
    transform(array, args) { 
    return _.sortBy(array, args); 
    } 
} 

マイ* ngFor:

<button ion-item *ngFor="let user of users | order-by:'likes'" > 

のErrまたは

TypeError: Cannot read property 'toUpperCase' of undefined (" 

    <ion-list> 
      <button ion-item [ERROR ->]*ngFor="let user of users | order-by: 'likes'"> 

その他は同じproblemを持っていました。なぜ動作しないのか分かりません。

配列を並べ替える別のパイプがありますか? :) ありがとうございました !

+0

ブラウザのコンソールですべてのエラー? –

+1

パイプ名かもしれませんか?私は動作する 'orderBy'と呼ばれる同様のパイプを持っています。また、 'args'を' Array'として渡します: '['likes']'。 – Arg0n

+0

@GünterZöchbauerコンソールのエラーが私の質問のエラーヘッダー(更新)の下にあります @ Arg0nパイプの名前はデコレータ '@Pipe({name: 'order-by'})'にありません。あなたのパイプは子値で配列をソートしていますか? :) – luiswill

答えて

5

問題が解決しました。

だから最初にarg0nパイプの名前で最初の問題を解決した、それは-なしにする必要があります。どうもありがとうございました !

name: sort-byname: sortByになります。

次に、配列をソートするjavascript関数を検索しました。

マイパイプはその後だった:私のテンプレートで最後に

Cannot read property 'sort' of undefined 

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

@Pipe({ name: 'orderBy' }) 
export class OrderByPipe implements PipeTransform{ 
    transform(arr){ 
    if(arr === undefined){return null;} 
    return arr.sort((a, b) => { 
     if (a.likes < b.likes) { 
     return 1; 
     } 
     if (a.likes > b.likes) { 
     return -1; 
     } 
     return 0; 
    }); 
    } 
} 

ので、角度2における非同期の、私はif(arr === undefined){return null;}が、それ以外の場合はエラーがスロー入れていました.html変更:

<button ion-item *ngFor="let user of (users | orderBy)"> 

(私は私の配列がもうFireBaseListObservableあるので(users | orderBy) | asyncを入れていないが、私の意見では唯一の配列、そうではない必要はありませんでした)

+1

それはもうロダッシュを使用していないようです、おそらくインポートを削除することができます。私が以前に言ったように、興味があるならば、ハードコードされた比較値に拘束されない別のOrderByPipeを持っています。 – Arg0n

+0

ありがとう、atm私は数を比較するためのパイプが必要です、とにかくありがとう:) – luiswill

関連する問題