angular2 @Input EventEmitter update view

Question

iam trying to make a simple grid component and i have a trouble with updating view after emitting event ! Please explain who knows, why after updating simple component, view do not re-rendered ? whats wrong with this code ?

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);
  }

}

Full example here https://plnkr.co/edit/InxsHu9GwCtMplYoocsS?p=preview

Answer 1

The resource data is updated properly in parent and child components, just the form doesn't show the update.

I think you need to change the values pipe to only return the keys but not the values and then access the values using the *ngFor variables with the keys to get the values in the view directly.

Answer 2

EDITED: Günter Zöchbauer, thank you saved my time !

I think you need to change the values pipe to only return the keys but not the values and then access the values using the *ngFor variables with the keys to get the values in the view directly.

this was root of evil