如何在 Angular 中正确订阅 Observable答案

【问题标题】：How to properly subscribe to an Observable in Angular如何在 Angular 中正确订阅 Observable
【发布时间】：2020-06-04 18:30:21
【问题描述】：

我的目标是生成一个有效的 observable（来自 GET 请求）并订阅它，这样我就可以在我的应用程序的多个不同组件中使用一次请求的数据。

我希望来自服务器的 JSON 结构如下：

{
  "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"
        }
      }
    ]
  }
}

今天接近： 根据Angular Documentation on Requesting a typed response，我在名为 api.service 的服务的 typescript 中定义了一些数据接口：

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;
}

并编写了一个向服务中给定的 url 发送请求的函数：

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)
  }

现在出现了一个大问题：这种方法有效吗？如果是，我如何正确订阅 getApiResponse() 返回的 Observable，以便我可以例如访问接口Women的变量next？

【问题讨论】：

“这个方法有效吗？” - 你试过了吗？它工作了吗？ “我如何正确订阅” - .subscribe?
@jonrsharpe “这个方法有效吗？” - 尝试过，有效，但将界面放入“好的甚至最佳实践”的界面？ “我如何正确订阅？” - 使用.subscribe 很明显，但是我什么时候需要对其进行类型转换才能访问文档中提到的属性？
鉴于这是文档显示的内容，为什么会有问题？ do 你需要输入任何东西吗？您的接口不包含无法直接从 JSON 反序列化的任何内容；没有日期属性、方法等。

标签： angular typescript observable httprequest angular-cli

【解决方案1】：

是的，这是您所要求的基本设置。因此，根据您当前的设置，您可以在模板 HTML 或 TS 中订阅它：

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

用法：

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

或在您的 HTML 中使用 async 管道

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

【讨论】：

【解决方案2】：

是的，正如@mwilson 所说，这是基本设置。

假设您在 response.component.ts，您可以采取以下步骤订阅 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;
 );
}

然后在你的 HTML 模板中，说response.component.html -

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

【讨论】：