Question

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

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数组并使用它。所以看起来我们必须忍受它 - 除了一个有更好的解决方案。

Angular2 http调用和典型的Observable问题

1 个答案: