angular2 @Input EventEmitter更新视图

时间:2016-09-26 09:54:40

标签: javascript forms angular

我试图制作一个简单的网格组件,我在发布事件后更新视图时出现问题! 请解释一下谁知道,为什么更新简单组件后,视图不重新渲染?这个代码怎么了?

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

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

<强>编辑: GünterZöchbauer,谢谢你节省了我的时间!

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

这是邪恶的根源