CODEWITHSUNDEEP
angulartypescriptrxjs
Reza Saadati
Reza Saadati

Reputation: 1274

How to use the data of subscribe() somewhere else?

onKeyUp(event: any): void {
  this.technologiesService.getTechnologies(event.target.value)
    .subscribe(data => {
       this.myData = data;
    });
}

The output of data is:

enter image description here

I would like to declare data as property, so that I could use it somewhere else. As you see, I have tried it with this.myData = data and myData is defined like this on the top of my class: myData = [];.

This is how I try to use myData:

<mat-option *ngFor="let data of this.myData | async" [value]="data.technology">
  <span>{{ data.technology}}</span>
</mat-option>

But I get the following errors:

ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'

ERROR TypeError: Cannot read property 'dispose' of null

What am I doing wrong?

Upvotes: 0

Views: 104

Answers (3)

Boyen
Boyen

Reputation: 1549

this.myData is not async, so no need for the async pipe

<mat-option *ngFor="let data of myData" [value]="data.technology">
  <span>{{ data.technology}}</span>
</mat-option>

will fix it.

However, I would advice to instead make the observable an instance variable.

onKeyUp(event: any): void {
  this.myData = this.technologiesService.getTechnologies(event.target.value)
}

<mat-option *ngFor="let data of myData | async" [value]="data.technology">
  <span>{{ data.technology}}</span>
</mat-option>

Upvotes: 1

Lia
Lia

Reputation: 11982

You should use one of subscribe or async pipe not together. it should be:

<mat-option *ngFor="let data of myData" [value]="data.technology">
  <span>{{ data.technology}}</span>
</mat-option>

when using subscride. and if you don't want to use subscribe but async, it should be:

<mat-option *ngFor="let data of myData | async" [value]="data.technology">
  <span>{{ data.technology}}</span>
</mat-option>

ts:

onKeyUp(event: any): void {
  this.myData = this.technologiesService.getTechnologies(event.target.value)
}

Upvotes: 2

upinder kumar
upinder kumar

Reputation: 837

<mat-option *ngFor="let data of myData | async" [value]="data.technology">
  <span>{{ data.technology}}</span>
</mat-option>

Upvotes: 0

Related Questions