我有一个API调用，以布尔检查结束。我想创建新用户，但如果db中存在电子邮件，我想设置canAddUser = false。我做以下事情：
canAddUser: boolean;
setNewUserValues() {
if (this.formUser.email) {
this.checkExistingEmail();
}
}
checkExistingEmail() {
this.userService.findPrivilegedUsersUsingGET().subscribe(users => {
const mailIndex = users.findIndex(user => user.email === this.formUser.email);
mailIndex !== -1 ? this.canAddUser = false : this.canAddUser = true;
console.log(this.canAddUser);
});
}
如果我将布尔值记录到我当前正在进行的控制台，我会得到正确的值。但是，如果我将其记录在别处，那么首先是未定义的！然后如果我触发触发setNewUserValues（）的按钮，它会再次获得正确的值。我错过了什么？
编辑
有点解决了我的问题。
setNewUserValues() {
if (this.formUser.email) {
this.checkExistingEmail();
}
}
checkExistingEmail() {
this.userService.findPrivilegedUsersUsingGET().subscribe(users => {
this.mailIndex = users.findIndex(user => user.email === this.formUser.email);
});
this.validateEmail(this.mailIndex);
console.log(this.canAddUser);
}
private validateEmail(index: number) {
index !== -1 ? this.canAddUser = false : this.canAddUser = true;
}
如果我传递的是现有的电子邮件，我得到了正确的值，但是如果我传递的不是数据库，但我先得到假值，那么如果我再次触发它，那么值再次正常。
如果您没有订阅异步操作，则无法保证已将代码分配给代码中的任何位置。
我要做的是将布尔标志更改为主题：
canAddUser$: Subject<boolean>;
需要时发出值：
mailIndex !== -1 ? this.canAddUser$.next(false): this.canAddUser$.next(true);
// this.canAddUser$.next(mailIndex === -1);
当您需要它时，订阅它：
someFunction() {
this.canAddUser$.subscribe(canAdd => {
// Here *canAdd* is a boolean
})
}
你的findPrivilegedUsersUsingGET函数是异步的。这意味着可能需要几秒甚至几分钟才能完成。 canAddUser只会在异步调用结束时为真或假。
canAddUser: boolean; // undefined
// this can take a while to complete.
this.userService.findPrivilegedUsersUsingGET().subscribe(users => {
const mailIndex = users.findIndex(user => user.email === this.formUser.email);
mailIndex !== -1 ? this.canAddUser = false : this.canAddUser = true;
// do work here
console.log(this.canAddUser);
this.doWork();
});
doWork() {
console.log(this.canAddUser);
}
基本答案，但您可以将canAddUser初始化为您想要的任何默认值。
以canAddUser = false;为例。
您可以急切地加载用户列表，然后通过模板将用户传递给组件的功能。
在您的组件中：
public users$: Observable<any[]>;
public ngOnInit() {
this.users$ = this.userService.findPrivilegedUsersUsingGET().pipe(share());
}
setNewUserValues(users: any[]) {
if (this.formUser.email) {
this.checkExistingEmail(users);
}
}
checkExistingEmail(users: any[]) {
this.mailIndex = users.findIndex(user => user.email === this.formUser.email);
this.validateEmail(this.mailIndex);
console.log(this.canAddUser);
}
private validateEmail(index: number) {
index !== -1 ? this.canAddUser = false : this.canAddUser = true;
}
在您的模板中：
<ng-container *ngIf="users$ | async as users">
<button (click)="setNewUserValues(users)">Example</button>
</ng-container>
<ng-container *ngIf"!(users$ | async">
Loading users...
</ng-container>
这是消除混合过程编程和反应式编程的副作用的一种方法。
另一种方法是让checkExistingEmail()返回一个可观察的（或承诺）。
public constructor(private _change: ChangeDetectorRef) {}
setNewUserValues() {
if (this.formUser.email) {
this.checkExistingEmail(this.formUser.email).subscribe(canAddUser => {
console.log("canAddUser:", canAddUser);
this.canAddUser = canAddUser;
this._change.markForCheck();
});
}
}
public checkExistingEmail(email): Observable<boolean> {
return this.userService.findPrivilegedUsersUsingGET().pipe(
map(users => users.findIndex(user => user.email === email) !== -1)
);
}
上面会将布尔结果打印到控制台，但我不知道你想对这个结果做什么。操作完成异步，我们需要告诉Angular组件的状态已经改变，视图应该更新，所以我调用“markForCheck（）”，但如果你没有使用OnPush更改检测，那么这可能不是需要。
作为基本规则。如果你在组件内部的异步回调中编写像this.XXXX = YYYY;这样的代码。你会遇到副作用，因为你正在将程序编程与反应式编程混合在一起。
通常人们会问“如何从异步函数返回值”这个问题。当我看到他们的示例源代码使用this引用更新属性时，我经常畏缩。
关于反应式编程的一些进一步阅
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
https://egghead.io/courses/introduction-to-reactive-programming
在Angular中回顾一下活跃形式的主题是个好主意：