0

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

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

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

...我得到“名字还没准备好！” 每次打印到控制台。

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

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

我知道这与什么时候可用有关，因为当我使用断点并调试传递给“getInitials()”函数的两个值时，我得到“未定义”。换句话说，该函数在运行时无法访问其他两个函数的返回值——因此我得到“名称未准备好！” 打印到控制台。我的问题是，我在架构上缺少什么来解决此类问题？

4

1 回答 1

1

所以这里发生的事情是 JavaScript 不认为你正在使用 getFirstNameFirstLetter 和 getLastNameFirstLetter 的返回值，所以当它进行调用时，它不会等待调用完成，而是继续下一个调用，这引入了一个比赛条件。如果您只是将其更改为

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

取决于您是否需要再次使用变量或仅用于该功能。

于 2017-05-23T19:01:30.367 回答