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
。
我的 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
。