Angular2 http 调用和典型的 Observable 问题

Question

我一直在尝试使用带有 Angular2 的 Observables 来对 Web Api 进行 http 调用已经有一段时间了，但找不到有效的解决方案。我想从 Web 服务中检索的 json 数据（包含每个级别的属性的级别列表）应该在之后通过级别的类定义进行转换，然后在我的视图中显示为一个简单的列表。
我发现并尝试了很多示例，但它们要么指的是旧版本，要么不完整，要么太复杂而无法理解 Angular 中这个工作流背后的基本原理。你能给我一个简单、完整和最新的例子吗？提前非常感谢！

Answer 1

由于我之前的更新实际上是我的临时解决方案，因此我现在将其发布为解决方案。信不信由你，我花了三天的时间才部分了解 Observables 在我的案例中是如何工作的，以及在网上可以找到的大量变化中真正重要、正确和最新的东西。

这发生在我的基础服务中（我有关卡、徽章……作为成就，并希望重用 get/post/put/delete）：

getAllAchievements(detailPath): Observable<Response> {
// prepare request url and header
this.specificUrl = this.webServiceUrl + detailPath;
this.headers.append('Content-type', 'application/json');
let options = new RequestOptions({ headers: this.headers });
this.result = this.http.get(this.specificUrl, options)
.catch(error => this.handleError(error));
return this.result;}

这发生在我的级别服务中（这里，我称之为基础服务）：

observable : Observable<Response>; getAllLevels(): Observable<Level[]> { this.observable = this.achievementsService.getAllAchievements(this.allLevelsUrlPart); return this.observable .map((response: Response) => { const srcData = response.json() as Level[]; return srcData;}) .catch(error => this.handleError(error));} 这发生在我的控制器中：

  ngOnInit(): void {
    this.levelsObservable = this.levelsService.getAllLevels();
            this.levelsObservable.subscribe(
              data => console.log(data)
        );
  }

视图代码如下所示：

<label *ngFor="let level of levelsObservable | async">{{level}}</label>

Level 类如下所示：

export class Level {
    constructor(
        public id: number, 
        public name: string, 
        public description: string
        ){}}

控制台上的“数据”输出为：“Array[Array[4]]”，视图显示： “[对象对象]、[对象对象]、[对象对象]、[对象对象]”。 在调试时，我看到对象确实包含来自请求的数据，但看起来好像它们没有正确转换为关卡。

即使在Official Angular 2 page

当详细检查示例 url 时，可以看到他们有这个 Object 数组并使用它。所以看起来我们必须忍受它 - 除非有更好的解决方案。