Warm tip: This article is reproduced from stackoverflow.com, please click
angular asynchronous pipe

How to use the async pipe with an Observable

发布于 2020-04-18 10:00:52

Typescript:

getMyList(): Observable<ApiResponse> {
    return this.http.get<ApiResponse>(this.myListUrl);
  }

this.myList = getMyList();

HTML:

<ng-select [items]="myList | async">

The List: 
Id: 1, Name: foo; Id: 2, Name: bar; ...

Earlier I did something like this, but this does not work async (with the pipe):

getList().subscribe(data => {
   data.result.forEach(entry => {
      this.myList.push(entry.Name);
   });
});

I read something with mapping the Observable ApiResponse to an Observable MyList, but I have no idea how to do this. Looking for advice

Questioner
Jan Bürger
Viewed
57
分享
Thierry Falvo 2020-02-05 01:44

You can find here a stackblitz demo on how to use HttpClient, Observable and async pipe.

Please may I suggest you some best practices :

  • Use $ after your observable variable name to clearly distinguish it from other non observable variable. You should use async pipe with observable.

  • Needless to make a subscription to fill an array. Observables are very powerful with async pipe.

  • Distinguish with your model the API response, and the item model in inside. (if it's the case). You can see in my example, that get returns a ApiResponse model, but after we are retrieving an array of ApiItem.

Update:

HttpClient.get returns an Observable. It's like a pipeline. You can then define a chain of operators, and each time a data is emitted, it will pass througth this pipeline, in order to be transformed. In this example, api returns a ApiResponse object, with one unique property : an array of ApiItem. map operator transforms the input value. Here, it returns the list of items.

You will find a lot of good tutorials about Observables and pipe operators. For example HTTP Example with Observables from Asim.

Hope this could help you a little.

Jan Bürger 2020-02-05 01:30:07

Yes! That really help, but can you explain further what (map(response => response.items) does? where comes the first and the second response from?

Jan Bürger 2020-02-05 01:37:57

I have a structure like this: export class ApiResponse { status: number; message: number; result: any; } export class myList{ id: number; name: string; }

Jan Bürger 2020-02-05 01:43:31

solved it myself. this.myList$ = this.apiService.getMyList().pipe(map(result => result.result)); Thanks a lot for that great stackblitz demo! It helped a lot!

Thierry Falvo 2020-02-05 01:45:40

I updated my answer with more details.

Related issues

1
Read lines from named pipe in Winapi
2
Bad file descriptor error when closing pipe file descriptors after forking
3
tcsh passing a variable inside a shell script
4
how to add line break in Angular pipe output
5
Bash get size of a list of files extracted with head command
6
Process array using a single pipe
7
Using the apt list command to output to a file (Debian)
8
How do you read from pipe with both children in C?
9
Extending Angular DatePipe errors in Angular 11, worked in Angular 10
10
subprocess.Popen(): change stderr during child's execution