Why HTMLElement passed to the component from html via event handler points to the wrong html element-CodePudding

I have a table and I want to pass HTMLElement of the table cell to the component via click event hadler. At the very begininng I have the pointer to the correct table cell but after I init change detection manually the pointer points to the wrong cell (the next to the correct one)

I can't find out why it happens. I created example with console.log(tableCell) before and after initialization of the change detection (method setEditMode in AppComponent)

CodePudding user response：

Working stackblitz:

Thus, each time we defined a value, the colIndex increased by one. You can check this if you set a data attribute for the colIndex as you did for the colName. The solution involves defining a default value for your row.

data: Array<Array<{ isEditMode?: boolean; value?: string }>> = [
    [
      {
        isEditMode: false,
        value: '',
      },
      {
        isEditMode: false,
        value: '',
      },
      {
        isEditMode: false,
        value: '',
      },
    ],
  ];

However, this also means we need to update our add row method to look like so:

addRow(): void {
    this.data.push([
      {
        isEditMode: false,
        value: '',
      },
      {
        isEditMode: false,
        value: '',
      },
      {
        isEditMode: false,
        value: '',
      },
    ]);
  }

Previously all you did was just add an array of length three, but with no cells defined within it.