输入文本框绑定无法设置但正在获取 Angular 属性答案

【问题标题】：Input text box binding failing to set but working on get of an Angular property输入文本框绑定无法设置但正在获取 Angular 属性
【发布时间】：2019-05-05 11:07:33
【问题描述】：

我注意到以下绑定似乎对 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;
  }
}

keyup 按预期执行，但rendition 的设置器不会向控制台打印任何内容，所以我假设它没有正确绑定和/或根本不可绑定。

我松散地关注stuff like this，并且我有一个Blitzy 可以玩的行为。

由于input 作为标签和@Input 作为装饰器之间的冲突，谷歌搜索有点困难。后者到目前为止赢了......不过，我收集的是使用[(ngModel)] 绑定或使用指令或管道。所有的线索在相关性和/或可靠性方面似乎都有点不确定。因此，StackBlitz 上的演示。

【问题讨论】：

onKeyUp的方法在哪里？
@wentjun 在组件中使用配置类作为@Input。类 EditableRowComponent 在第 18 行。

标签： angular data-binding

【解决方案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>

【讨论】：

我会试一试（这是我找到的建议之一）。但是，如果我能理解为什么我必须使用它，我会感到更自在。对我来说，感觉就像我以错误的方式接近它。为什么 ngModel 需要 setter 而不是 getter（根本也不设置/获取其他属性）？似乎只有明确的 getter 是一个问题，我在文档中没有找到任何提到这一点的参考资料。
它似乎确实有效（已接受答案）。然而，我现在对黑魔法的印象。我们在哪里说它是我们绑定的输入的值？为什么我们不必为 rendition 的 getter 而不是为获取或设置其他属性而这样做？我对这种行为的具体细节感到困惑。使用管道和/或指令会是更聪明的方法吗？
value={{config.rendition}} - 无法工作。这转换为： value=propertyValue;两种方式绑定通常使用 [(...)] 语法。不幸的是，我不知道为什么 [(value)]="config.rendition" 在这里不起作用.. :/
哦，这可能是我可能会提供帮助的东西。有人告诉我，字段属性的双向绑定（即不是 {{blah}} 但 {{config.blah}} 实际上是不可绑定的这样（因为它依赖于 SimpleChanges）。所以诀窍是依赖一系列单向绑定，这些绑定为了我们的理智和方便而打包到 ngModel 中出汗了。注意。我对上述声明不承担任何责任。这完全是一个家伙曾经告诉我的...。现在，当然，这是额外努力的+1。你对这里的管道/指令有什么想法吗？
感谢 +1 :)。管道/指令而不是您的获取/设置？如果我理解正确，您只需添加“$”字符还是？这是货币掩码的常见问题 - 我也遇到过这个问题并发现了这个：npmjs.com/package/ng2-currency-mask 如果它不适合您的需求，那么它是一个很好的代码库。我根据需要复制和编辑了它..