What are some effective ways to utilize the data gathered from a subscribe() method in a different

Question

What are some effective ways to utilize the data gathered from a subscribe() method in a different

handleKeyUp(event: any): void {
  this.technologiesService.retrieveData(event.target.value)
    .subscribe(data => {
       this.myResults = data;
    });
}

The result of data is:

https://i.sstatic.net/WjiD4.png

I want to assign data as a property for later use. I've attempted this with this.myResults = data, and declared myResults at the beginning of my class as myResults = [];.

This is how I am trying to utilize myResults:

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

However, I'm encountering the following errors:

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

ERROR TypeError: Cannot read property 'dispose' of null

What mistake am I making?

angular typescript rxjs

Answer 1

Answer №1

To optimize your code, make sure to use either the subscribe or async pipe, not both simultaneously. Here's how you should implement it:

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

If you choose to use subscribe, follow this format. If you prefer async instead of subscribe, use the following:

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

Here's the corresponding TypeScript code:

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

Answer 2

To optimize your code, make sure to use either the subscribe or async pipe, not both simultaneously. Here's how you should implement it:

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

If you choose to use subscribe, follow this format. If you prefer async instead of subscribe, use the following:

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

Here's the corresponding TypeScript code:

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

Answer 3

Answer №2

myData doesn't need to be used with the async pipe

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

this will correct it.

However, I recommend setting the observable as an instance variable instead.

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>

Answer 4

myData doesn't need to be used with the async pipe

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

this will correct it.

However, I recommend setting the observable as an instance variable instead.

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>

Answer 5

Answer №3

<mat-option *ngFor="let item of items | async" [value]="item.type">
  <span>{{ item.type }}</span>
</mat-option>

Answer 6

<mat-option *ngFor="let item of items | async" [value]="item.type">
  <span>{{ item.type }}</span>
</mat-option>

What are some effective ways to utilize the data gathered from a subscribe() method in a different

Answer №1

Answer №2

Answer №3

Similar questions

Can a single shield protect every part of an Angular application?

Performing simultaneous document queries within a single API in MongoDB

Dialog component from HeadlessUI doesn't support the Transition feature

Utilize @ngrx/store to merge various reducers from feature modules

The 'in' operator is unable to find 'colour' within true (function return type)

What is the process for extracting dates in JavaScript?

Set up the hardware back button to respond to the current route condition in Ionic 4

Strange behavior when working with Typescript decorators and Object.defineProperty

How can I replace any non-alphanumeric characters in a string with an underscore using JavaScript or TypeScript?

"Encountering a 404 error with the angular2-in-memory-web-api

Issue: Encountering an ObjectUnsubscribedError while using Observables in RxJS and Angular2

Tips for enhancing a TypeScript interface for a React component in (Material-UI) by utilizing styled-components

How can I import multiple variables in TypeScript?

What is the best way to specify the return type of a currying function?

Tips on connecting an Angular web application with Google authentication

Incorporating a JavaScript file into Angular

Angular error: Unable to access the 'toLowerCase' property of an undefined value

Deactivating a Component in Ionic Angular

Version 2.0.0 of Angular working with Karma to offer Router capabilities

Having trouble with an Angular HTTP PUT request returning a 404 error for a valid URL on a JSON server!