title: Angular 2+ bind table cell to array record
body: <p>I have a table which is generated from json. 
  Each cell is editable. 
  I would like to bind each cell to each array record.
  I need this because I would like to let user change each cell and then let him save it on server.</p>
  
  <p>This is my HTML</p>
  
  <pre><code>&lt;table class="table table-bordered table-hover table-striped" *ngIf="lifeSphere"&gt;
  
    &lt;tr&gt;
      &lt;th *ngFor="let date of lifeSphere.lifeSphereDates" [(ngModel)]="date"&gt;{{date}}&lt;/th&gt;
    &lt;/tr&gt;
  
    &lt;tr *ngFor="let row of lifeSphere.lifeSphereRows"&gt;
      &lt;td *ngFor="let cell of row.lifeSphereCell" contenteditable&gt;{{cell}}&lt;/td&gt;
    &lt;/tr&gt;
  
  &lt;/table&gt;
  
  
  &lt;button (click)="saveLifeSphere()" class="btn btn-success"&gt;Save&lt;/button&gt;
  </code></pre>
  
  <p>Error message:</p>
  
  <pre><code>Cannot assign to a reference or variable!
  </code></pre>
  
  <p>Json example</p>
  
  <pre><code>{
    "id": 10,
    "lifeSphereRows": [
      {
        "id": 1,
        "lifeSphereCell": [
          "0/0",
          "0/1",
          "0/2",
        ]
      },
      {
        "id": 2,
        "lifeSphereCell": [
          "1/0",
          "1/1",
          "1/2",
        ]
      },
      {
        "id": 3,
        "lifeSphereCell": [
          "2/0",
          "2/1",
          "2/2",
        ]
      },
    ],
    "lifeSphereDates": [
      "2017-10-05T22:31:41.539",
      "2017-10-05T22:31:41.541",
      "2017-10-05T22:31:41.541",
    ]
  }
  </code></pre>
  
  <p>I think the best solution is to use two way data binding, but is it possible to use it here?</p>