Angular 2 / TypeScript：如何在组件中访问可观察属性

Question

我有一个可观察对象，它是这样填充的：

this._mySubscription = this._myService.getSomething(id)
                                .subscribe(
                                    response => this._myData = response, 
                                    error => this.displayError(<any>error),
                                    () => this.stopLoading()
                                );

我可以使用 Elvis 操作符在 HTML 标记中访问它的属性，就像这样：

{{_myData?.PropertyNameHere}}

但是我应该如何使用TypeScript在组件中访问相同的属性呢？

这会在该属性下产生红色的波浪线：

this._myData.PropertyNameHere

并说：

Observable上不存在该属性

更新：服务调用示例

getSomething(id: string): Observable<any> {

let params = 'id=' + id;

return this._http
            .post(apiUrl + 'SomeController/SomeAction', params, {withCredentials: true, headers: this.headers})
            .timeoutWith(maxTimeHttpCalls, Observable.defer(() => Observable.throw(this._feedbackService.timeout())))
            .map((response: Response) => response.json().data.Items);

}

- Glenn Utter

---

你能展示一下 getSomething 方法吗？ - Dave V

当然！我已经更新了问题。 - Glenn Utter

我想知道它是否没有捕获你在超时中抛出的Observable，因此正在将返回类型解释为Observable。你能否尝试一下不使用“timeoutWith”，只是将其映射到响应？ - Dave V

我不确定你在哪里输入了 this._myData。你可能已经将其设置为 Observable，例如 private _myData:Observable;，但它应该是 any 或某个与服务器响应中的 Items 属性匹配的接口类型。 - Katana314

是的，它被声明为 private _myData: Observable<any>;。将它更改为 any 后就可以使用了。谢谢您！ - Glenn Utter

Answer 1

类中的 _myData 不应该是 Observable 类型。它应该是从您的服务中返回的对象类型，这是在 map 操作符中使用的。

.map((response: Response) => response.json().data.Items)

无论 data.Items 的类型是什么，_myData 的类型应该与之匹配。如果不知道类型是什么，可以使用 any，这样您可以不受编译器警告地对其进行操作。但是，如果您知道数据的结构，最好为其创建一个模型类，以获得强类型。

interface SomeModel {
  somProperty: string;
}

getSomething(id: string): Observable<SomeModel> {

  return this._http
             ...
             .map((response: Response) => <SomeModel>)response.json().data.Items);
}

您的组件

class MyComponent {
  private _myData: SomeModel;

  this._mySubscription = this._myService.getSomething(id)
    .subscribe((response: SomeModel) => this._myData = response, 
               error => this.displayError(<any>error),
               () => this.stopLoading());
}

- Paul Samsotha