Angular 如何正确地订阅角度上的可观测数据

我的目标是生成一个有效的可观察数据（来自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"
        }
      }
    ]
  }
}

今天向上靠近： 根据api，我在名为api.service的服务的typescript中定义了一些数据接口：

导出接口响应{
一:一,；
二:二,；
三:三,；
}
导出接口1{
一些：弦；
更多：字符串；
}
导出接口二{
a:弦；
b:弦；
}
导出接口三{
事物：事物[]；
人民：人民[]；
}
导出接口东西{
一些：弦；
更多：字符串；
}
导出接口人员{
再次：字符串；
妇女：妇女；
男人：男人；
}
出口接口妇女{
下一步：字符串；
}
出口接口人员{
最后：字符串；
}

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

导出类API服务{
专用url=https://example.com/api/1234';
构造函数（私有http:HttpClient）{}
getApiResponse（）{
//返回响应类型的可观察值
还这个
.http
.get（this.url）
}

---

现在，大问题出现了：这种方法有效吗？如果有效，我如何正确订阅

getApiResponse（）返回的可观测值

因此我可以访问接口

Women

的变量

next

？

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

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

---

是的，正如@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;
 );
}

---

“这种方法有效吗？”-你试过了吗？有效吗？“我如何正确订阅”-

.subscribe

？@jornsharpe“这种方法有效吗？”-试过了，但正在将一个接口放入接口“良好或最佳实践”？“我如何正确订阅？”-使用

.subscribe

是显而易见的，但是我什么时候需要键入cast才能访问文档中提到的属性？鉴于文档中显示了这一点，为什么会出现问题？您需要键入cast吗？您的接口不包含任何不能直接从JSON反序列化的内容；没有日期性质、方法等。

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

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