如何正确订阅 Angular 中的 Observable

Question

My aim is to generate a valid observable (from a GET request) and subscribe to it, so i can use the once requested data in multiple different components of my app.

I expect a JSON structured like the following one from the server:

{
  "one": {
    "some": "variable",
    "more": "variables"
  },
  "two": {    
    "a": "variable",
    "b": "variable"
  },
  "three": {
    "things": [
      {        
        "some": "variable",
        "more": "variables
      },
      {
        "some": "variable",
        "more": "variables"
      }
    ],
    "peoples": [
      {
        "again": "variables",
        "women": {
          "next": "variable"
        },
        "man": {
          "last": "variable"
        }
      }
    ]
  }
}

Approach up today: According to the Angular Documentation on Requesting a typed response i defined some data interfaces in the typescript of a service called api.service:

export interface Response {
    one: One;
    two: Two;
    three: Three;
}

export interface One {
    some: string;
    more: string;
}

export interface Two {
    a: string;
    b: string;
}

export interface Three {
    things: Thing[];
    peoples: People[];
}

export interface Thing {
    some: string;
    more: string;
}

export interface People {
    again: string;
    women: Women;
    men: Men;
}

export interface Women {
    next: string;
}

export interface Men {
    last: string;
}

And wrote a function that sends a request to a url given in the service:

export classApiService {
  private url = 'https://example.com/api/1234';

  constructor(private http: HttpClient) { }

  getApiResponse() {
    // returns Observable of Type Response
    return this
      .http
      .get<Response>(this.url)
  }

And now the big questions rise: Is this approch valid? And if yes, how do i properly subscribe the Observable returned by getApiResponse() so i can eg access the variable next of the interface Women ?

Answer 1

Yes, this is the basic setup for what you're asking. So, with you're current setup, you could can subscribe to it within your template HTML or your TS:

...
public data: Observable<any[]>; // (whatever the type is instead of any)
this.data = this.getApiResponse();
...

Usage:

this.data.subscribe( d => console.log(d));

or in your HTML using the async pipe

<div *ngFor="let d of data | async">{{d}}</div>

Answer 2

Yeap, as @mwilson mentioned that is the basic setup.

Assuming you are on response.component.ts , these are the steps you could take to subscribe to the observable:

import {ClassApiService} from './class-api.service.ts';

data: Observable<Response[]>;

// within the constructor
constructor (private apiService: ClassApiService) {}

ngOnInit(): void {
 this.apiService.getApiResponse().subscribe(
   (results: Response[]) => this.data = results;
 );
}

Then within your HTML template, say response.component.html -

<div *ngIf="data">
  <ul *ngFor="let d of data">
    <li>{{ d.someName }}</li>
  </ul>
</div>