Cannot assign to read only property 'selected' of object '[object Object]'

Question

Im trying to uncheck my checkboxes programatically but when i bind to a value from the ngrx store I get the following error Cannot assign to read only property 'selected' of object '[object Object]' here's my view

<ul>
    <li *ngFor="let language of languages">
      <div>
        <mat-checkbox [(ngModel)]="language.selected" color="primary">
          {{ language.value }}
        </mat-checkbox>
      </div>
    </li>
  </ul>

and my ts

    this.languagesSub = this.store.select(getCreateLanguagesLanguages).subscribe(res => this.languages = res);

why can't i bind to language.selected?

Answer 1

If you have the strict mode on, then all data from store are read-only. This means you should create a copy, if you want to use them.

this.languagesSub = this.store.select(getCreateLanguagesLanguages)
  .subscribe(res => this.languages = res.map(l => ({...l})));
  // this will create a deep copy of all objects in languages array