Zurückgeben von HttpClient-Subskriptionsdaten an eine Komponente

Question

Ich versuche, Daten von einem Dienst mithilfe der subscribe-Methode zurückzugeben.

import { Injectable } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 

@Injectable() 
export class DevRequestService { 
    constructor(private http: HttpClient){} 
    getListOfAgencies() { 
     return this.http.get('https://example.com/api/agency').subscribe(data => { 
      return data; 
      }); 
    } 
} 

Komponente:

ngOnInit(): void { 
    console.log(this.devRequestService.getListOfAgencies()); 
} 

Unten ist die Ausgabe, die ich in console.log bekommen statt der Rückgabe des Objekts mit den Werten:

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}

Answer 1

Sie sollten für die Daten abonnieren und es zu einer Variablen in der Komponente zuweisen wie unten:

ngOnInit(): void { 
    this.devRequestService.getListOfAgencies().subscribe((data) => { 
     this.agencies = data; 
    }) 
}; 

Answer 2

ich tun würde, dies in Ihrer .ts: private Daten $: Observable;

ngOnInit(): void { 
    this.data$ = this.devRequestService.getListOfAgencies(); 
} 

und in Ihrer .html Vorlage, dies:

<div> {{ data$ | async }} </div> 

, um den Wert zu erhalten.

Answer 3

Wenn Sie Daten laden, ansehen möchten, sollten Sie neue Thema in Ihrem Dienst nutzen. Zum Beispiel:

export class PostService { 
    subject = new Subject(); 
    constructor(private httpClient: HttpClient) {} 

    const httpRequest = new HttpRequest(
     'GET', 
     '/your-url', 
     body, 
     { 
      headers: new HttpHeaders().set('Content-Type', 'body'), 
     } 
    ); 
    this.httpClient.request(httpRequest).subscribe((res) => { 
     if (res.type) { 
      this.subject.next(res.body); 
     } 
    }); 

    return this.subject; 
} 

In Komponente:

export class PostsComponent implements OnInit { 
    posts: any; 
    constructor(private postService: PostService) { } 

    ngOnInit() { 
     this.getPosts(); 
    } 

    private getPosts() { 
     this.posts = this.postService.getPosts(); 
    } 
} 

In Ansicht:

<app-post-item 
    class="col-md-4" 
    *ngFor="let post of posts | async" 
    [post]="post"> 
</app-post-item>