在Angular Promise内部访问外部变量then()函数
问题描述:
大家晚上好。我想知道如何访问Angular 2/4的脚本中Promise的then()
内的外部变量。我正在尝试通过Rest API来完成动态表单验证以检查用户名可用性。在Angular Promise内部访问外部变量then()函数
这里userService.isUsernameAvailable(userName)
返回一个完美的承诺。我唯一想回答的问题是,如何更改then()
和catch()
上的i
值。
static usernameAvailabilityValidator(userService: UserService) {
let i = 1; //outer variable
userService.isUsernameAvailable(userName).then((res) => {
i = 2;
}).catch((res) => {
i = 3;
});
console.log("i is "+ i); // should output 2 or 3
}
IRRELEVANT低于
下面是不相关的这个问题:我添加下面的代码来提供上下文来什么,我尽量做到。你不必阅读它,它不会增加我的问题。
我的目标是返回,返回null
或验证JSON对象的功能,因为这是在验证角2
static usernameAvailabilityValidator(userService: UserService) {
return (control: FormControl) : any =>{
let userName: string = control.value;
console.log("current username"+userName);
let i = 1;
let response:{} = null; //here response is similar to i
userService.isUsernameAvailable(userName).then((res) => {
i++;
if (res.status == 1) {
response = null;
}
else {
response = {'usernameInUse': 1};
}
}).catch((res) => {
response = null;
});
console.log("i"+i);
return response; // response is returned to the outside function
}
}
如何工作谢谢大家提前。
答
isUsernameAvailable
返回Promise,因为它在调用后不能立即返回值(因为它例如等待网络请求)。因此,您的console.log("i"+i);
和return response;
被调用的方式在您的then
回调之前以及变量被修改之前。因此,您的usernameAvailabilityValidator
无法立即返回值,您可以返回Promise或使用TypeScript的异步/等待功能(https://basarat.gitbooks.io/typescript/content/docs/async-await.html)。
答
需要实现异步验证器为同一
如 -
validate(c:AbstractControl) {
return new Promise(resolve =>
this.accountService.getUserNames(c.value).subscribe(res => {
if (res == true) {
resolve(null);
}
else {
resolve({validateEmailTaken: {valid: false}});
}
}));
}
你可以找到更多的校验这个Reactive & TemplateDriven
[异步验证(https://开头的角.IO /导向/形式验证#验证函数) – Ryan