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>

Angular 2：根据复选框更改某些文本

1 个答案: