传入值在 Angular 应用中的运行函数时不可用

Question

我意识到在何时某些功能的产品在 JavaScript 中可用的方式和具体而言，我缺少一些东西。

在我的 Angular 应用程序中，为了获取用户的姓名首字母，我正在解析从 API 返回的数据，并检索 firstName 的第一个字母，以及第一个两个不同函数中姓氏的字母。这两个功能按预期工作，我可以在控制台中看到正确的结果：

getFirstNameFirstLetter() {
    if (this.authenticationService.isAuthenticated()) {
        const userObj = JSON.parse(sessionStorage.getItem('currentUser'));
        const userInfo = userObj.data;
        const firstName = userInfo.name.first;
        const firstNameFirstLetter = firstName.trim().charAt(0);
        console.log(firstNameFirstLetter);
        return firstNameFirstLetter;
    }
}

getLastNameFirstLetter() {
    if (this.authenticationService.isAuthenticated()) {
        const userObj = JSON.parse(sessionStorage.getItem('currentUser'));
        const userInfo = userObj.data;
        const lastName = userInfo.name.last;
        const lastNameFirstLetter = lastName.trim().charAt(0);
        console.log(lastNameFirstLetter);
        return lastNameFirstLetter;
    }
}

现在是我不完全理解的部分。当我然后传递这两个函数的返回值时，为了得到缩写，像这样：

getInitials(firstNameFirstLetter, lastNameFirstLetter) {
    if (this.authenticationService.isAuthenticated()) {
        if (!this.firstNameFirstLetter || !this.lastNameFirstLetter) {
            console.log('Names not ready!');
            return;
        } else if (this.firstNameFirstLetter && this.lastNameFirstLetter) {
            console.log(firstNameFirstLetter + lastNameFirstLetter);
            return firstNameFirstLetter + lastNameFirstLetter;
        }
    }
}

... 我每次都会将 "Names not ready!" 打印到控制台。

顺便说一下，我运行在 Angular 的 ngOnInit 生命周期挂钩中使用这些函数，如下所示：

ngOnInit() {
    this.getFirstNameFirstLetter();
    this.getLastNameFirstLetter();
    this.getInitials(this.firstNameFirstLetter, this.lastNameFirstLetter);
}

我知道这与什么时候可用有关，因为当我使用断点并调试传递给 "getInitials()" 函数的两个值时，我得到 'undefined'。换句话说，该函数在运行时无法访问其他两个函数的返回值——因此我将 'Names not ready!' 打印到控制台。我的问题是，在架构上我缺少什么来解决此类问题？

Answer 1

所以这里发生的事情是 JavaScript 认为您没有使用 getFirstNameFirstLetter 和 getLastNameFirstLetter 的 return 值，所以当它发出调用时，而不是等待调用完成后，它继续进行下一个，它引入了竞争条件。如果您只是将其更改为

ngOnInit() {
    let temp1 = this.getFirstNameFirstLetter();
    let temp2 = this.getLastNameFirstLetter();
    this.getInitials(this.firstNameFirstLetter, this.lastNameFirstLetter);
}

然后它会等待前面的函数完成再调用下一个。

此外，我不经常使用 const，所以我可能是错的，它可能遵循不同的作用域规则，但按照正常的作用域规则，在该函数中设置一个变量，它仅在该函数中可用，您需要将其设置为

this.firstNameFirstLetter = firstName.trim().charAt(0);

在函数外访问它。

或者一箭双雕

ngOnInit() {
    this.firstNameFirstLetter = this.getFirstNameFirstLetter();
    this.lastNameFirstLetter = this.getLastNameFirstLetter();
    this.getInitials(this.firstNameFirstLetter, this.lastNameFirstLetter);
}

或

ngOnInit() {
    let firstNameFirstLetter = this.getFirstNameFirstLetter();
    let lastNameFirstLetter = this.getLastNameFirstLetter();
    this.getInitials(firstNameFirstLetter, lastNameFirstLetter);
}

取决于您是再次需要这些变量还是仅针对该功能。

传入值在 Angular 应用中的运行函数时不可用

Passed-in Values Not Available at Run-time of Function in Angular App

javascript

typescript

ngoninit

angular

传入值在 Angular 应用中的 运行 函数时不可用

Passed-in Values Not Available at Run-time of Function in Angular App

javascript

typescript

ngoninit

angular

传入值在 Angular 应用中的运行函数时不可用