更改绑定到 ng-model 的值不会更改输入文本上的值

Question

我有一个输入文本框，它使用ngModel绑定到组件类中的变量。单击按钮后，我想清除输入文本，但是更改变量值不会更改输入文本。

我已经重新分配了变量并从 ChangeDetectorRef 调用 detectChanges()，但它仍然不起作用。

这是我拥有的模板

<form #beaconForm="ngForm" autocomplete="off">
<input #searchBox
id="search-query"
name="search-query"
[ngModel]="inputValue"
(ngModelChange)="searchAutocomplete($event)"
(keydown)="onKeyDown($event, searchBox)"
(blur)="onBlur()"
(focus)="onFocused(searchBox.value)">
<button color="accent" mat-mini-fab (click)="action(searchBox.value)"><mat-icon>add</mat-icon></button>
</form>

然后在单击我想做的动作时

private inputValue: string = "";
action(value) {
this.inputValue = "";
this.cd.detectChanges();
}

我希望这会清除输入，但事实并非如此。知道我的错误在哪里吗？

Answer 1

如果需要双向数据绑定，则应[(ngModel)]="inputValue"。[ngModel]适用于单向数据绑定。

尝试将代码更改为：

<form #beaconForm="ngForm" autocomplete="off">
<input #searchBox id="search-query" name="search-query"
//
[(ngModel)]="inputValue"
(ngModelChange)="searchAutocomplete($event)"
(keydown)="onKeyDown($event, searchBox)"
(blur)="onBlur()"
(focus)="onFocused(searchBox.value)" >
<button color="accent" mat-mini-fab (click)="action(searchBox.value)"> 
<mat-icon>add</mat-icon>
</button>
</form>

Stackblitz

Answer 2

在您的评论之后，我明白了，为什么您不能使用单向绑定。

让我们从inputValue = 1111开始

在按钮单击(触发action()方法调用)时，我们将inputValue设置为''。现在，每当我们直接更改输入框中的值时，inputValue变量的值都不会更改，因为它的单向变量绑定了。因此，现在即使输入框中有一些值，inputValue的值也会保持''。当我们调用action()时，它会将其设置回''.但是等等它已经''了，所以视图不需要更新(即使执行手动更改检测也不起作用，因为角度不会看到任何变化)。

要解决您的问题，您可以使用，[(ngModel)]按照每个人的建议。 如果您想尝试，您仍然可以使用[ngModel]但只需在输入更改时更新变量的值。

像这样：

searchAutocomplete(e) {
this.inputValue = e
// rest of the code
}

但这只是为了清楚地了解，如果双向绑定可以解决问题，我们不需要此解决方法。

https://stackblitz.com/edit/angular-rcdty6?file=src%2Fapp%2Fapp.component.html

Answer 3

请参阅以下工作版本： https://stackblitz.com/edit/angular-cqpqjj

TS

inputValue: string = "";
action(value) {
this.inputValue = "";
}

.html

<form #beaconForm="ngForm" autocomplete="off">
<input #searchBox
id="search-query"
name="search-query"
[(ngModel)]="inputValue">
<button color="accent" mat-mini-fab (click)="action(searchBox.value)">add</button>
</form>
<span>#{{inputValue}}#</span>

Answer 4

试试这个。

[(ngModel)]={{inputValue}}