javascript - angular2 @Input EventEmitter 更新 View

Question

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

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

Answer 1

父组件和子组件中的resource数据已正确更新，只是表单不显示更新。

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