Изменение привязки значения к ng-модели не меняет значение во входном тексте

Question

У меня есть текстовое поле ввода, которое использует привязку ngModel к переменной внутри класса компонента. После нажатия кнопки я хочу очистить вводимый текст, однако изменение значения переменной не изменит вводимый текст.

Я переназначил переменную и вызвал detectChanges () из ChangeDetectorRef, но он все еще не работает.

Это шаблон, который у меня есть

<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(), он устанавливает его обратно на ''.Но подождите, это уже было '', поэтому представление не нужно обновлять (даже если обнаружение изменений вручную не будет работать, потому что angular не увидит никаких изменений).

Чтобы исправить вашу проблему,либо вы можете использовать, [(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}}