Не удалось установить привязку текстового поля, но работает над получением свойства Angular

Question

Я заметил, что следующая привязка, кажется, производит правильное поведение в отношении свойства set , но не вызывается при установке значения.

<input (keyup)="onKeyUp()" value={{config.rendition}}>

export class RowConfig {
  constructor(public amount = 0, ... ) { }

  get rendition() { return this.amount + "$"; }
  set rendition(input: string) {
    console.log("setter with '" + input + "' invoked");
    const numeric = input.replace("$", "");
    this.amount = +numeric;
  }
}

The keyup выполняется как положено, но установщик rendition ничего не выводит на консоль, поэтому я предполагаю, что он не связан должным образом и / или не может быть привязан вообще.

Яслабо следуя подобным вещам , и у меня есть Blitzy поведения, чтобы играть с ним.

Поиск в Google был немного трудным из-за столкновения между input кактег и @Input в качестве декоратора.Последний, безусловно, победил ... Но я понял, что нужно либо связать, используя [(ngModel)], либо использовать директивы или каналы.Все трассы казались немного неуверенными в актуальности и / или надежности.Отсюда и демонстрация StackBlitz.

Answer 1

Попробуйте это:

<div *ngIf="config.editing">
  <input #first type="text" placeholder="xxx xx aaaa..." [(ngModel)]="config.first">
  <input #second type="text" placeholder="xxx aaaa..." [(ngModel)]="config.second">
  <input #amount type="text" (keyup)="onKeyUp()" placeholder="xxx" [(ngModel)]="config.rendition">
  <input (click)="onSave()" type="button" value="save">
</div>