Observable 不使用 AsyncPipe 提取数据答案

【问题标题】：Observable not pulling data with AsyncPipeObservable 不使用 AsyncPipe 提取数据
【发布时间】：2016-07-19 03:48:13
【问题描述】：

我的AccountService 定义如下：

 export class AccountService {
    user: Observable<PlatformUser>;
    isAdmin: boolean;

    constructor(private http: Http) {
        this.getUser();
    }

    private getUser() {
        if (this.user) { return this.user; }
        else {
            this.user = this.http.get("account/userinfo")
                .map(result => {
                    let user: PlatformUser = result.json();
                    user.isAdmin = user.roles.indexOf("InformationTechnology") != -1;
                    this.isAdmin = user.isAdmin;
                    return user;
                });
        }
    }

我从我的一个组件中引用它。

export class HomeComponent implements OnInit {
    user: Observable<PlatformUser>;

    constructor(private accountService: AccountService) {
    }

    ngOnInit() {
        this.user = this.accountService.user;
    }
}

在我看来，只是作为一个测试......我无法提取我期望的数据。如果我订阅事件并将结果分配给变量，一切正常，但我想使用 AsyncPipe 来避免手动设置。

{{user | json}}
{{user?.firstName | async}}

第一个是为了我的调试目的......它表明我没有撤回所有我应该得到的数据。它显示的内容如下：

{ "_isScalar": false, "source": { "_isScalar": false }, "operator": {} }

第二个不显示任何内容。我在这里遗漏了一些关键的知识，它阻碍了我并寻求启迪。

【问题讨论】：

标签： angular observable

【解决方案1】：

如果user 作为可观察对象返回给您并且您可以订阅它，您可以尝试类似{{ ( user | async )?.firstName }} 的内容

首先你需要通过async 管道传递user observable。当有可用的数据时，您可以调用user.firstName，就像它是一个常规变量一样。

【讨论】：

行得通！您能否在回答中详细说明为什么有必要？
非常感谢。这很棒。我什至没有想到这一点，因为在此之前我已经使用了带有异步管道的 Observables，而不必这样做。我猜是因为它们已经填充了数据。