角度检测如果从.ts中选中复选框

max*_*020 15 typescript angular

我正在使用Angular 4,我的组件的html模板文件上有一个复选框:

<input type="checkbox" (change)="canBeEditable($event)">
Run Code Online (Sandbox Code Playgroud)

在我的组件的.ts文件中,我将其设置为true.

toggleEditable() {
    this.contentEditable = true;
}
Run Code Online (Sandbox Code Playgroud)

我的问题是,如果选中复选框,我只希望更改值.

所以它看起来像:

toggleEditable() {
    if (checkbox is checked) {
      this.contentEditable = true;
    }
}
Run Code Online (Sandbox Code Playgroud)

我怎样才能做到这一点?

Fai*_*sal 24

您需要检查event.target.checked以解决此问题.这就是你如何实现这一目标:

<input type="checkbox" (change)="toggleEditable($event)">
Run Code Online (Sandbox Code Playgroud)

在组件的.ts中:

toggleEditable(event) {
     if ( event.target.checked ) {
         this.contentEditable = true;
    }
}
Run Code Online (Sandbox Code Playgroud)

  • 只需在打字稿中执行“event.checked”即可(您可以打印变量“event”以查看它包含哪些字段,这很容易给您答案:)) (2认同)