CODEWITHSUNDEEP
arraysangulartypescript
Mali
Mali

Reputation: 33

push object in array ngFor

I need to push object in ngFor but I got error Property 'push' does not exist on type 'Observable<MyDataType[]>'. Stackblitz demo code

HTML

<div *ngFor='let item of myObservableArray | async'>
    {{item.value}}
</div>

Component

  getData() {
    if (!this.myObservableArray) {
      this.myObservableArray = this.myService.getData();
      this.myObservableArray.push({"id":3, "value":"value_4"});
    }
  }

Service

mydata: MyDataType[] = [
    {"id":1, "value":"value_1"},
    {"id":2, "value":"value_2"},
    {"id":3, "value":"value_3"}
  ];

  getData():Observable<MyDataType[]>
  {
    let data = new Observable<MyDataType[]>(observer => {
          setTimeout(() => {
              observer.next(this.mydata);
          }, 4000);
    });
    return data;
  }
}

Upvotes: 1

Views: 646

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17600

Demo I added one more method to service to add or update.

  addOrUpdate(item:MyDataType){
    var elem=this.mydata.find(element=> element.id==item.id);
    if(elem){
      elem.value=item.value;
    }
    else{
      this.mydata.push(item);
    } 
  }

and call it inside component

this.myService.addOrUpdate({"id":3, "value":"value_4"});

Upvotes: 5

Related Questions