Search code examples
angulartypescriptrxjs

TypeError: Cannot add property 1, object is not extensible↵ at Array.push (<anonymous>)

I am trying to add some data to an array but I am getting not extensible error.

Component code:

this._store.select(p => p.collection.workspaceCollectionPages).subscribe((data: CollectionPageDbModel[]) =>{
      if(data){
      return data.map((collectionPageDbModel)=> {

      this.collectionPages.push(collectionPageDbModel) //Getting error on this line while pushing

    });}

enter image description here

I have four objects in my data var, which I am trying to push in collectionPages, but I am getting extensible error while pushing.

enter image description here collectionPage array where i need to add more data

enter image description here This data I need to push

CollectionPageDbModel:

export class CollectionPageDbModel implements IDbModel {
  public id?: number;
  public collection_version_id: number;
  public user_id?: string;
  public name: string;
  public position?: number = 0;
  public contents: string;
  public created_at?: string;
  public updated_at?: string;
  public server_id?: any;

}

Can someone please help me out resolving this

Solution

  • Make a copy of object using the Object.assign method and try again,

    this.collectionPages = Object.assign([], this.collectionPages);
this.collectionPages.push(collectionPageDbModel);

    ES6 simplified code would be,

    this.collectionPages = [...this.collectionPages, collectionPageDbModel]