Observable 不使用 AsyncPipe 提取数据

Observable not pulling data with AsyncPipe

我的 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": {} }

第二个没有显示任何内容。我在这里遗漏了一个关键的知识点,这阻碍了我,并寻求启示。

如果 user 作为可观察对象返回给您并且您可以订阅它,您可以尝试这样的事情 {{ ( user | async )?.firstName }}

首先你需要通过 async 管道传递 user observable。 当其中有可用数据时,您可以像调用常规变量一样调用 user.firstName