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

在您发表评论后，我明白了，为什么您无法通过一种方式进行绑定。

让我们以main queue

开头

单击按钮（触发inputValue = 1111方法调用）时，我们将action()设置为inputValue。现在，每当我们直接在输入框中更改值时，''变量的值就不会更改，因为它是变量绑定的一种方式。因此，即使输入框中包含某些值，现在inputValue的值仍保持为inputValue。当我们调用''时，它将其设置回action()。但是请稍候，它已经''，因此不需要更新视图（即使进行手动更改检测也不起作用，因为角度不会看到任何更改）。

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

类似的东西：

[ngModel]

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

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

Answer 3

尝试一下。

[(ngModel)]={{inputValue}}

Answer 4

请参阅以下工作版本： 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>

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

4 个答案: