Angular 单向绑定仅更新一次视图[关闭]答案

【问题标题】：Angular one way binding updates the view only once [closed]Angular 单向绑定仅更新一次视图[关闭]
【发布时间】：2019-12-28 16:23:08
【问题描述】：

我试图了解 Angulars 的一种方式绑定是如何工作的。在下面的代码中，按钮只更新一次视图，在随后的点击中对视图没有影响。有人可以解释为什么它会这样工作吗？在我看来，每次单击按钮时，数据绑定 obj 都会设置为一个新的引用对象。那么每次单击按钮时不应该更新视图吗？

模板：

<div *ngIf="obj;">
   <input #testInput [value]="obj.testValue">
   <button (click)="onClick(5)"></button>
</div>

打字稿：

export class TempComponent {
   constructor() {}

   obj = { testValue: 1 };

   onClick(value: number): void {
       this.obj = { testValue: value };
   }
}

【问题讨论】：

必须工作，stackblitz.com/edit/…
好吧，很高兴你加入了 StackBlitz。所以：第一步。输入值为 3 步骤 2 用户手动输入 2 输入值为 2 步骤 3 用户点击按钮，输入值变为 5 步骤 4 用户手动输入 2 步骤 5 用户点击按钮，值仍为 2 ，为什么不是 5 个？

标签： angular data-binding

【解决方案1】：

这仅适用于一次，因为当用户更改输入中的值时您不会更新值（2-way-binding）。 Angular 将它知道的值（第一次单击后为 5）与新值（也为 5）进行比较，并确定它不需要在视图中反映变化，因为值是相同的。每次尝试不同的值，你会看到不同。

使用随机数字工作 Stackblitz。

【讨论】：

好吧，这就是我所怀疑的，但实际的绑定值是“obj”的一个子属性，它被完全替换了。但这似乎无关紧要。因此，如果我希望 Angular 在每次单击按钮时将值重置为 5，是否可以通过一种方式绑定来完成，或者首选方式是什么？
这并不不重要，但它只是一个因素。如果您没有更改参考，您稍后会遇到问题。在这种情况下，首选方法是使用 2 路绑定。如果您不需要该值，您通常没有用户可以输入的输入：)

【解决方案2】：

这与变更检测有关

因此，即使在多次点击之后，obj.testValue 的值也保持不变。您在文本框中输入的内容不会设置回obj.testValue。

当更改检测周期触发时，它会检查每个 @Input 属性更改，在这种情况下，obj.testValue 的值永远不会更改（始终为 5）。

所以输入绑定属性[value] 不会得到新值，因为与obj.testValue 关联的值没有改变。

相反，您可以使用 ngModel 进行两种方式绑定

<input [(ngModel)]="obj.test">

【讨论】：

但是 obj.testValue 包含在更改检测中，它不是 @Input。它只是没有改变。
谢谢顺便说一句，用相同的值 (5) 更新视图不能用一种方式绑定来完成吗？
@user10103655 如果obj.testValue 的值没有变化，那么Angular 在变化检测周期内不会更新[value]。
@user10103655 可以通过 hack 来完成，但是为什么要在这里避免双向数据绑定呢？无论哪种方式，请检查此stackblitz.com/edit/angular-agj7rc?file=src/app/… 我重置并将其设置回 5

【解决方案3】：

Angular 的单向绑定意味着视图可以获取类字段值，但类字段不能访问视图变量（因此它只能以一种方式工作）。

在这里，对于第一次单击，您将初始值 1 替换为 5。之后，您为 obj 分配一个新对象，该对象的 testValue 值为 5。

如果要在每次单击按钮时更新视图，则必须替换

 onClick(value: number): void {
       this.obj = { testValue: value };
 }

由

onClick(value: number): void {
       this.obj.testValue += value;
}

【讨论】：