仅以一种方式绑定

Question

我有一个用户表，点击时想要更新。我创建了一个服务来做到这一点。

问题是，当我开始编辑表格时，在编辑表单中，就像双向绑定一样，我不想同时编辑两边。如果我在单击编辑按钮时取出 [(ngModel)] 上的 ()，则不会填充已编辑的数据。

点击单元格时

this.dataService.setUser(row);

我的数据服务

public currentUser = new Subject<User>();
setUser(user) {
    this.currentUser.next(user);
}

我的编辑组件

this.dataService.currentUser.subscribe(value => this.user = value);

我到处搜索，找不到答案，也许在中间创建一个对象然后销毁，但不知道该怎么做。

这是一张图片，imgur.com/a/yq3yFNC 问题是我不想要双向绑定，因为首先我必须按下下面的按钮来验证。我只需要一种方式绑定。 （此时如果我在下面编辑它会编辑我的表格）

Here is the example code.

我不能使用[value] 或[ngModel]，因为它没有将值返回给我的对象用户。这就是我使用[(ngModel)] 的原因。

Answer 1

发生这种情况是因为您的“读取”显示和“编辑”显示绑定到同一个对象。您仍然想使用双向绑定，但是您想将它们绑定到不同的对象。

您应该复制对象的属性，而不是将编辑对象分配给“读取”显示正在使用的同一事物。

编辑组件

this.dataService.currentUser.subscribe(value => this.user = {...value});

然后，当您想要保存值时，您可以将属性分配回原始对象，或者简单地将旧对象替换为新对象。

实现此目的的一种方法是存储对原始对象的引用以及编辑组件将对其进行操作的复制值：

this.dataService.currentUser.subscribe(value => {
  this.original = value;
  this.user = {...value};
});

save() {
  Object.assign(this.user, this.original)
}

---

注意：这是一个浅拷贝，这意味着像数字和字符串这样的简单值将被复制，但对象引用将保持不变。如果你需要一个深拷贝，你可以在 SO 上搜索——这个问题有很多不同的解决方案。

---

解决错误问题的旧答案

简短的回答是您的编辑单元格不知道其数据已更改。因为您的点击是在不同的组件上，所以 Angular 只会重新检查与之交互的组件。你需要手动告诉 Angular 组件发生了变化

编辑组件

constructor(private changeDetector: ChangeDetectorRef) {}

this.dataService.currentUser.subscribe(value => {
  this.user = value;
  this.changeDetector.markForCheck();
});

---

更详细的解释：https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

Answer 2

您可以使用 [ngModel] 和 (ngModelChange) 代替 [(ngModel)]

输入Agustin123到第二次编辑后，就可以得到你想要的输出了

the online example

 <!-- <input [(ngModel)]="user.name"> -->

 <input [ngModel]="user.name" (ngModelChange)="onChange($event)" >

ngModel 数据属性设置元素的值属性，而 ngModelChange 事件属性监听元素值的变化。

参考

• Template Syntax

---

旧答案

您可以在 data.service

中的 next 之后使用 complete

在线示例： https://stackblitz.com/edit/httpsstackoverflowcomquestions51987641angular-6-bind-just-in-on?file=src/app/data.service.ts

  setUser(user) {
    this.currentUser.next(user);
    this.currentUser.complete();
  }