Angular 2：根據複選框更改一些文本

Question

我對Angular 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" 
    ... 
} 

當然，因爲我在開始時和開始分配值這是行不通的，版本2是假的，即使布爾值更改後，文本沒有，因爲我不分配它，我想..

我知道我可以做一些onClick函數（或類似的東西）複選框，但我只是想了解是否有一個更容易，更「角度」的方式來完成這一點。

Answer 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>