Angular 2+ bind table cell to array record

Question

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.

This is my HTML

<table class="table table-bordered table-hover table-striped" *ngIf="lifeSphere">

  <tr>
    <th *ngFor="let date of lifeSphere.lifeSphereDates" [(ngModel)]="date">{{date}}</th>
  </tr>

  <tr *ngFor="let row of lifeSphere.lifeSphereRows">
    <td *ngFor="let cell of row.lifeSphereCell" contenteditable>{{cell}}</td>
  </tr>

</table>


<button (click)="saveLifeSphere()" class="btn btn-success">Save</button>

Error message:

Cannot assign to a reference or variable!

Json example

{
  "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",
  ]
}

I think the best solution is to use two way data binding, but is it possible to use it here?

Answer 1

You can only assign to properties (fields) of your component to ngModel . Try this,

<tr>
    <th *ngFor="let date of lifeSphere.lifeSphereDates" [(ngModel)]="lifeSphere.lifeSphereDates[i]">{{date}}</th>
</tr>