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

Question

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

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

这是我有的模板

<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