Question

我正在通过routerLink传递对象并根据对象属性更新表单输入。但是当我更改表单输入的内容时，对象属性不会更新。

<input type="text" [(ngModel)]="center.id">
<input type="text" [(ngModel)]="center.name" placeholder="name">

<tr *ngFor="let center of centers">
  <td [routerLink]="['/add-center', center]">{{center.id}}</td>
</tr>

在组件中：

center: Center;

constructor(private centerService: CenterService, private route: ActivatedRoute) {

}

从routerLink获取参数：

ngOnInit() {

  this.route.params.subscribe(center => {
    this.center = center;
  });
}

提交表格后，我打电话给以下方法：

editCenter() {

  this.centerService.updateCenter(this.center)
    .subscribe(
      res => {
        console.log('Updated Successfully');
      },
      err => {
        console.log(err);
      })
  ;
  console.log(this.center);
}

该方法在日志中打印对象的相同属性。它不会更新对象的属性。

尝试手动更改属性但出现以下错误：

TypeError：尝试分配给readonly属性。

Answer 1

因为我们发现这确实是一个表单（带有表单标记）...正如您的代码现在所在，您应该在控制台中出错，因为您没有提供name属性你的领域。如果您有表格，则需要这样做。

<form #f="ngForm">
  <input type="text" [(ngModel)]="center.id" name="id">
  <input type="text" [(ngModel)]="center.name" placeholder="name" name="name">
</form>

拥有name属性可以更新您的模型。

<强> DEMO

Answer 2

this.centerService.updateCenter(this.center)是异步的。您需要将控制台置于subscribe回调中以查看更改。

editCenter() {
    this.centerService.updateCenter(this.center)
        .subscribe(
            res => {
                console.log('Updated Successfully');
                console.log(this.center);
            },
            err => {
                console.log(err);
            });
}

为什么Angular双向绑定不适用于通过routerLink传递的参数？

2 个答案: