angular2 @Input EventEmitter 更新视图答案

【问题标题】：angular2 @Input EventEmitter update viewangular2 @Input EventEmitter 更新视图
【发布时间】：2016-09-26 09:54:39
【问题描述】：

我正在尝试制作一个简单的网格组件，但在发出事件后更新视图时遇到了麻烦！请解释一下，谁知道，为什么更新简单组件后，视图不重新渲染？这段代码有什么问题？

export class GridComponent implements OnInit {
  @Input() resource: any [];
  @Output() saveModel = new EventEmitter();
  @Output() deleteModel = new EventEmitter();
  attributes: any[];
  isUpdating: boolean = false;
  updatingID: number;

  constructor() {}

  ngOnInit() {
    this.attributes = Object.keys(this.resource[0]);
  }

  toggleUpdate(id, flag = true) {
    this.isUpdating = !this.isUpdating;
    this.updatingID = flag ? id : undefined;
  }

  destroy(id) {
    this.deleteModel.emit(id);
  }

  save(model) {
    this.saveModel.emit(model);
    this.toggleUpdate(model.id, false);
  }

  cancel(id) {
    this.toggleUpdate(id, false);
  }

}

这里有完整的例子https://plnkr.co/edit/InxsHu9GwCtMplYoocsS?p=preview

【问题讨论】：

预期的行为是什么？重现问题需要哪些步骤？
我有一个对象数组和网格组件，只是 *ngFor 指令循环这个数组，第二个 *ngFor 循环使用自定义管道的对象。 GridComponent 有 @Output 销毁和保存。单击更新按钮时，数据组件将显示具有模型当前值的输入，并将它们与模型绑定。保存方法触发事件和父组件监听该事件，并且新数据正确传递，接下来我用一个新数组替换，但在屏幕上相同的数据。我尝试实现 ngOnChanges 事件并分配给 this.resource = values.resource.currentValue，但没有成功

标签： javascript forms angular

【解决方案1】：

resource 数据在父子组件中正确更新，只是表单没有显示更新。

我认为您需要更改values 管道以仅返回键而不返回值，然后使用带有键的*ngFor 变量访问值以直接获取视图中的值。

【讨论】：

【解决方案2】：

已编辑： Günter Zöchbauer，谢谢您节省了我的时间！

我认为您需要更改值管道以仅返回键而不返回值，然后使用带有键的 *ngFor 变量访问值以直接获取视图中的值。

这是万恶之源

【讨论】：