2016-07-08 5 views
1

おはようございます。これは私の最初の質問です、私は混乱しないと思います。私は、HTMLフラグメントは、私が@inputプロパティを介して別のコンポーネントから得た値を使用してコンポーネントに表示/非表示しようとしている、私の実際のコードは次のようになります。Angular2の@inputプロパティを使用してNgIf値を更新する

import { Component, OnInit, Input } from '@angular/core'; 
@Component({ 
    moduleId: module.id, 
    selector: 'test-animation', 
    template: ` 
     <h1>The value is {{show}} </h1> (1) 
     <span *ngIf="show"> show me! </span>` (2) 
}) 

export class TestComponent implements OnInit {  
    @Input() show: boolean = false;  
    constructor() { }  
    ngOnInit() {  
    }  
} 

私はこのようにそれを使用しています別のコンポーネントで:

<test-animation show="{{showAnimation}}"></test-animation> 

「showAnimation」私は動的に(クリック)イベントを使用して、第2成分の変化変数です。今問題:たとえ補間(1)が期待どおりに動作し、値の変化を反映していたとしても、ngIf(2)は影響を受けていないようです。私はgetプロパティ、異なるテンプレート構文を使用しようとしましたが、変更はngIfに反映されません。私はイベントngonchangesをチェックし、値が変化しています。

ドキュメントとGoogleの数時間のテストとリサーチの後、私は自分のコードがそのプロパティの変更を報告していないことを理解しました。しかし、私はその理由、欠けているもの、それを解決する方法を理解できませんでした。なぜ私はこの動作を取得していると私はそれを解決する方法を説明する誰も私に?

答えて

2

あなたはこの試みることができます:

<test-animation [show]="showAnimation"></test-animation> 
+2

'<テスト・アニメーションショー= "{{showAnimation}}">は' "真" 'または' "偽" 'の文字列を渡します'while' [show] = "showAnimation"は値 'true'または' false'(または 'showAnimationが保持する値)を渡します。 '{{xxx}}'は、値を指定する前に常に値を文字列化します。 –

+0

それはまさに私が行方不明だった。説明してくれてありがとう、私の間違いは何だったのかはっきりしています。 –

関連する問題