Angular2補間は、このテンプレートでは変更

Question

に更新されません：

<label for="condition">Condition</label> 
<input type="range" min="0" max="4" name="condition" 
     [(ngModel)]="vehicle.condition"> 
<span>{{vehicle.condition | condition}}</span> 

私は人間が読めるに数値を変換することになっているカスタムパイプを通って範囲スライダの数値の出力を補間しています文字列：このパイプで

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

@Pipe({ 
    name: 'condition', 
    pure: false 
}) 
export class ConditionPipe implements PipeTransform { 

    transform(value: number): any { 
    switch (value) { 
     case 0: return 'Damaged'; 
     case 1: return 'Rough'; 
     case 2: return 'Average'; 
     case 3: return 'Clean'; 
     case 4: return 'Outstanding'; 
    } 

    } 

} 

、私だけvehicle.conditionの初期値のための適切な出力を得ます。スライダをドラッグしてモデルを更新すると、補間は消えます。補間された式からパイプを削除すると期待どおりに動作しますが、変更時に数値の更新が表示されます。

<label for="condition">Condition</label> 
<input type="range" min="0" max="4" name="condition" 
     [(ngModel)]="vehicle.condition"> 
<p>numeric: {{vehicle.condition}}</p> 
<p>pipe: {{vehicle.condition | condition}}</p> 
<p>class method: {{vehicle.niceCondition(vehicle.condition)}}</p> 
<p>component method: {{niceCondition(vehicle.condition)}}</p> 

が生成されます：私はクラスメソッドまたはコンポーネントメソッドでこのswitchを置けば

は、私は同じ結果を得る補間更新して処理しないのはなぜ

このswitch文？

Answer 1

文字列変数と数値を比較しようとしているからです。

次のことを試してみてください。

transform(value: number): any { 
    switch (+value) { <== notice + before of value 
    case 0: return 'Damaged'; 
    case 1: return 'Rough'; 
    case 2: return 'Average'; 
    case 3: return 'Clean'; 
    case 4: return 'Outstanding'; 
    } 
} 

それとも、このようなあなたのパイプを変更することができます。

@Pipe({ 
    name: 'condition', 
    pure: false 
}) 
export class ConditionPipe implements PipeTransform { 
    result = { 
    0: 'Damaged', 
    1: 'Rough', 
    2: 'Average', 
    3: 'Clean', 
    4: 'Outstanding' 
    } 
    transform(value: number): any { 
    return this.result[value]; 
    } 
} 

はplunker