2016-10-03 15 views
1

私はAngular 2の新機能を学びました。私はブール値に応じて画面上のテキストを変更しようとしていました。角2:チェックボックスに応じて一部のテキストを変更する

私はトグルチェックボックスを持っていて、トグルボタンに応じて画面上のテキストを前後に切り替えたいとしましょう。

<div class="ui toggle checkbox"> 
    <input type="checkbox" [(ngModel)]="version2" name="versionControl"> 
    <label>version2</label> 
</div> 
{{versionText}} 

そしてコンポーネントは、私は開始時と開始時の値を代入していますので、それは動作しません。もちろん、この

export class AppComponent { 
    version2:boolean=false; 
    versionText= this.version2 ? "This is Version 1:" : "Switched to Version 2" 
    ... 
} 

ようになり、VERSION2はfalseで、たとえブール値が後で変更されても、私は再びそれを割り当てていないので、テキストは表示されません。

私はチェックボックスで何らかのonClick関数(または類似のもの)を使って行うことができますが、これを達成するためのより簡単でより「角度のある」方法があるかどうかを知ることができます。

答えて

1

あなたはngIf使用することができます。

<div class="ui toggle checkbox"> 
    <input type="checkbox" [(ngModel)]="version2" name="versionControl"> 
    <label *ngIf="verion2">This is Version 1:</label> 
    <label *ngIf="!verion2">Switched to Version 2</label> 
</div> 

か、単に

<div class="ui toggle checkbox"> 
    <input type="checkbox" [(ngModel)]="version2" name="versionControl"> 
    <label>{{versionText}}</label> 
</div> 
関連する問題