Question

我正在Angular上做一个小项目，任务之一是仅在管理员登录时才显示2个按钮。现在，要检查管理员是否登录，我在user.service.ts文件中有一个方法

public getRole(): string {
    return sessionStorage.getItem('role');
}

现在，我有一个用于显示按钮的组件。当然，在.ts文件中，我导入了用户服务。

import { UserService } from 'src/app/services/user/user.service';

并将此代码添加到同一.ts文件的构造函数中。

private userService: UserService

然后，在html文件中，我这样检查：

<div *ngIf="this.userSevice.getRole() == 'ADMIN'">
                            <a class="btn btn-secondary col-md-12" routerLink='/boat-offer' routerLinkActive="active">Delete</a>
                            <a class="btn btn-success col-md-12" routerLink='/boat-offer' routerLinkActive="active">Edit</a>

</div>

但是，在控制台中，出现错误：

ERROR TypeError：无法读取未定义的属性'getRole'

更令人烦恼的是，我正在从事的项目是由我们的讲师给我们提供的，每个人使用的都是给我们getRole方法的相同版本。但是，在其他人的项目中，它起作用，而在我的项目中，它不起作用。我在做什么错了？

Answer 1

您在html中编写了userSevice而不是userSe r vice

Answer 2

您可以做的另一件事是将字符串比较包装在组件的方法中，这样就不会从HTML调用服务。

for ((i = 1; i <= $1; i++)); do
    ...
done

和HTML

isAdmin(){
    return this.userSevice.getRole() === 'ADMIN'
}

另一件事是，在比较字符串时，应使用<div *ngIf="isAdmin()"> <a class="btn btn-secondary col-md-12" routerLink='/boat-offer' routerLinkActive="active">Delete</a> <a class="btn btn-success col-md-12" routerLink='/boat-offer' routerLinkActive="active">Edit</a> </div>而不是===，如here

请注意，==不应是异步方法，如果您要使用async/await

详细示例：

sessionStorage.getItem('role')

Answer 3

当您需要调试类似的东西时。您应该更改功能以记录正在发生的事情。

public getRole(): string {
    const role = sessionStorage.getItem('role');;
    console.log('getRole', role);
    return role;
}

在模板中使用表达式比较字符串不是一个好主意。如果术语"ADMIN"发生变化，则必须搜索所有源代码以查找用法。因此，请向服务中添加方法。

public isAdmin(): boolean {
   const role = this.getRole();
   const isAdmin = role === 'ADMIN';
   console.log('isAdmin', isAdmin);
   return isAdmin;
}

您不应直接从模板调用共享服务方法。在模板表达式中调用函数会触发Angular将表达式标记为不纯，然后过度调用该函数。

相反，将值分配给ngOnInit()中的属性

@Component({
   ...
   template: `
     <div *ngIf="isAdmin">
         <a class="btn btn-secondary col-md-12" routerLink='/boat-offer' routerLinkActive="active">Delete</a>
         <a class="btn btn-success col-md-12" routerLink='/boat-offer' routerLinkActive="active">Edit</a>
     </div>
   `
})
export class ExampleComponent implements OnInit {
   isAdmin: boolean;

   constructor(myService: MyService) { }

   ngOnInit() {
      this.isAdmin = myService.isAdmin();
   }
}

此时，您应该在控制台中获得足够的反馈，以了解正在发生的事情。

getRole ADMIN
isAdmin true

如果遇到问题，请使用debugger;打开浏览器调试器工具。然后，您可以进入服务范围，看看发生了什么。

   ngOnInit() {
      debugger;
      this.isAdmin = myService.isAdmin();
   }

错误TypeError：无法读取未定义的属性'getRole'-角度

3 个答案: