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

Posted 2023-03-13

【中文标题】Angular App 中函数运行时传入的值不可用

【英文标题】：Passed-in Values Not Available at Run-time of Function in Angular App

【发布时间】：2017-10-23 21:07:26

【问题描述】：

我意识到在 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()”函数的两个值时，我得到“未定义”。换句话说，该函数在运行时无法访问其他两个函数的返回值——因此我得到“名称未准备好！”打印到控制台。我的问题是，我在架构上缺少什么来解决此类问题？

【问题讨论】：

我不同意，这不是简单的“我的代码有问题，请为我解决”，这是对他们为什么得到他们得到的结果的误解。这正是堆栈溢出的原因。

【参考方案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);

取决于您是再次需要变量还是仅用于该函数。

【讨论】：

非常感谢，@Joo_Beck！您的两个“用一块石头杀死两只鸟”中的第一个建议的解决方案有效： ngOnInit() this.firstNameFirstLetter = this.getFirstNameFirstLetter(); this.lastNameFirstLetter = this.getLastNameFirstLetter(); this.getInitials(this.firstNameFirstLetter, this.lastNameFirstLetter);

所以基本上，这里发生的是，在 OnInit 中，我首先将值分配给两个函数的结果。然后我正在运行“getInitials()”函数——它确保值在函数运行时可用。