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

Question

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

我已重新分配变量并从 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

Try this.

[(ngModel)]={{inputValue}}

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

在你的评论之后我明白了，为什么你的单向绑定不起作用。

让我们从 inputValue = 1111

开始

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

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

类似于：

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

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

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

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

Changing value bind to ng-model doesn't change the value on the input text

forms

angular2-ngmodel

ngmodel

angular