2017-01-27 9 views
1

hereのようにいくつかのデータを並べ替えるためにパイプを使いたいと思っていました。Ionic 2でパイプを使用する方法(リリースv2.2.1)

上記すなわち、我々は、以下の輸入とクラス定義を持って、angular documentationと一貫なります

だから、
import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({name: 'exponentialStrength'}) 
export class ExponentialStrengthPipe implements PipeTransform { 
    transform(value: number, exponent: string): number { 
    let exp = parseFloat(exponent); 
    return Math.pow(value, isNaN(exp) ? 1 : exp); 
    } 
} 

、上記に我々はPipePipeTransformからインポートして、私たちはPipeTransformから私たちのクラスを派生。イオン発生器、例えば、イオン発生器を使用する。 ionic g pipe testPipeは、私は別の輸入に気づき、そしてまたそれがPipeTransformを実装していません:

@Pipe({ 
    name: 'test-pipe' 
}) 
@Injectable() 
export class TestPipe { 
    transform(value, args) { 
    value = value + ''; // make sure it's a string 
    return value.toLowerCase(); 
    } 
} 

それはPipeTransformを拡張しないように?とにかく、私はそれを使用しようとしたので、私はそれを自分のコンポーネントに追加しようとします。

import { TestPipe } from '../../pipes/test-pipe'; 

@Component({ 
    pipes:[TestPipe], 
    selector: 'my-page', 

と私は、この活字体のエラーを取得:

[ts] Argument of type '{ pipes: typeof TestPipe[]; selector: string; 
templateUrl: string; animations: AnimationEntryM...' is not assignable 
to parameter of type 'Component'. 
Object literal may only specify known properties, and 'pipes' does not 
exist in type 'Component'.` 

いずれも、ここに任意のアイデアがありますか?パイプのドコモは一致していないようです。

答えて

6

アングル2のリリースバージョンでは、@Component decoratorにはpipesというプロパティは含まれていません。代わりに、あなたのアプリケーションにカスタムパイプを追加したり、特徴とすべきであるNgModuleさんdeclarations

import { TestPipe } from '... pipes/test-pipe'; 

@NgModule({ 
    declarations: [ 
    TestPipe, 
    ... 
    ], 
    ... 
}) 
class AppModule {} 

それがに追加してNgModuleさんdeclarationsコンポーネントのモジュールにインポートする必要はありません。それをコンポーネントのテンプレートで使用するだけです。

+0

これは100%動作します!ですから、Angularドコは少し古くなっています。今はちょうど(私の項目がソートされていないが呼び出されているが、別の問題です) – peterc

+0

あなたが好きです! – pcarrara

関連する問題