html - 选中复选框时取消选中文本输入的复选框和清除文本输入

Question

我有一个搜索栏和复选框:

<input type="text" placeholder="Search..." (keyup)="onKey()" [(ngModel)]="input">
<input type="checkbox" (click)="clearSearch()" [(ngModel)]="checkbox">View All

每当有人在搜索栏中输入内容时，我都希望复选框变为未选中状态。 同样，无论何时有人选中该复选框，我都希望清除搜索栏。

我试过以下方法:

export class App {
 checkbox = ['checked']
 clearSearch() { 
 this.input = '';
};
onKey() { 
 checkbox = ['unchecked']
}

但这显然不太奏效。

这是一个带有上述代码的插件:https://plnkr.co/edit/uAYxswpoz18jlRUqAMn5?p=preview

实现此功能的最佳方式是什么？

谢谢!

Answer 1

你快到了。首先，我建议您对复选框数据模型使用 bool 值。数组计算结果为真，因此复选框仍处于选中状态。如果您引用实例属性，您应该使用单词 this 来引用它们。所以方法 onKey() 应该是:

onKey() { 
 this.checkbox = false
}

plunker