Zugriff äußere Variable innerhalb Angular Promise dann() Funktion

Question

Guten Abend alle. Ich würde gerne wissen, wie ich auf eine äußere Variable innerhalb der then() von Promise in Angular 2/4 Typoskript zugreifen kann. Ich versuche eine dynamische Formularvalidierung durchzuführen, um die Verfügbarkeit von Nutzernamen über eine Rest-API zu überprüfen.

Hier userService.isUsernameAvailable(userName) gibt ein Versprechen, das perfekt funktioniert. Das einzige, was ich beantworten möchte, ist, wie kann ich diese i Werte auf then() und catch() ändern.

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 BELOW

Unten finden Sie nicht relevant zu dieser Frage: Ich füge folgenden Code Kontext zu schaffen, was ich versuche zu erreichen. Sie müssen es nicht lesen und es fügt meiner Frage nicht hinzu.

Mein Ziel ist es, eine Funktion zurückzugeben, die null oder ein JSON-Objekt für den Validator zurückgibt, weil das ist, wie Validierer in Angular 2. arbeiten

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 
    } 
    } 

Vielen Dank an alle im Voraus.

Answer 1

isUsernameAvailable gibt eine Promise zurück, weil sie nicht unmittelbar nach dem Aufruf einen Wert zurückgeben kann (weil sie beispielsweise auf eine Netzwerkanforderung wartet). Daher werden Ihre console.log("i"+i); und return response; weit vor Ihrem then Rückruf aufgerufen und bevor die Variablen geändert wurden. Aus diesem Grund kann Ihr usernameAvailabilityValidator nicht sofort einen Wert zurückgeben, stattdessen können Sie das Versprechen zurückgeben oder das async/await-Feature von TypeScript verwenden (https://basarat.gitbooks.io/typescript/content/docs/async-await.html).

Answer 2

Sie benötigen Async Validatoren zur Umsetzung für die gleiche

zB -

validate(c:AbstractControl) { 
    return new Promise(resolve => 
     this.accountService.getUserNames(c.value).subscribe(res => { 
     if (res == true) { 
      resolve(null); 
     } 
     else { 
      resolve({validateEmailTaken: {valid: false}}); 
     } 
    })); 
    } 

können Sie mehr Auf Validatoren auf dieser Reactive & TemplateDriven