Редактируемая таблица Angular2 обновляет соседнюю ячейку

Question

У меня странное поведение с редактируемой таблицей. После добавления строки в таблицу я изменяю значение в первом столбце новой строки. Обновленное значение отображается не только в первом столбце, но и во втором столбце новой строки. В данных значения правильные, но это отличается от того, что отображается на экране.

Скрип странного поведения

Я пытался использовать [(ngModel)], (change)="updateCell(i,j, box.value, $event)" а также (blur) обновить значения ячеек в таблице, и я получаю тот же результат - данные верны, но не отображается представление.

Учитывая этот фон, что не так в этом коде:

import { Component } from '@angular/core';

/**
 * This class represents the table component.
 */
@Component({
  moduleId: module.id,
  selector: 'table-component',
  template: `
    <H3>Editable table</H3>
    <table>
      <tr class="row" *ngFor="let row of data; let i=index;">
        <td class="col" *ngFor="let col of row; let j=index;">
          <div><input type="text" #box value="{{col}}"   
              (change)="updateCell(i,j, box.value, $event)" /></div>
        </td>
      </tr>
    </table>
    <button (click)="addRow()">Add row</button>&nbsp;
    <button (click)="addCol()">Add col</button>&nbsp;
    <H3>Resulting data table</H3>
    <table>
      <tr class="row" *ngFor="let row of data; let i=index;">
        <td class="col" *ngFor="let col of row; let j=index;">
          <div>{{col}}</div>
        </td>
      </tr>
    </table>
  `,
  styleUrls: ['table.component.css']
})    
export class TableComponent {
  noOfCols:number = 3;
  noOfRows:number = 4;
  data: any[] = [];

  constructor(){
    this.initializeData();
  }

  initializeData() {
    for (let row = 0; row < this.noOfRows; row++) {
      this.data.push([]);
      for (let col  = 0; col < this.noOfCols; col++) {
        this.data[row].push(row*this.noOfCols + col);
      }
    }
  }

  addRow() {
    let newRow: any[] = [];
    for (let column = 0; column < this.data[0].length; column++) {
      newRow.push('');
    }
    this.data.push(newRow);
  }

  addCol() {
    for (let row = 0; row < this.data.length; row++) {
      this.data[row].push('');
    }
  }

  updateCell(row:number, col:number, value:any, e:any) {
    e.stopImmediatePropagation();
    this.data[row][col] = value;
  }
}

При последующем изменении значения второй столбец соответственно не обновляется...