CODEWITHSUNDEEP
angulartypescriptangular-materialngrxngrx-store
Noah Bergh
Noah Bergh

Reputation: 495

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

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?

Upvotes: 1

Views: 5210

Answers (2)

Chaniro
Chaniro

Reputation: 399

Every object you put in your store become immutable. That means, all setters are removed. That's how NgRx maintain immutability which is a core concept : you never mutatate an object, you replace it with a "new version". So, in order to make it works, you need to dispatch an action and handle it using with your reducer. Take a good look at the "Getting started" of NgRx.

Upvotes: 3

mat.hudak
mat.hudak

Reputation: 3193

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

Upvotes: 0

Related Questions