TypeError：“未定义ctx.activeUser”
TypeError：“未定义ctx.activeUser”
提问于 2021-04-14 17:43:20
我正在开发一个管理应用程序，目前我正在尝试隐藏一些路由，这取决于
管理员。由于一些未知的原因，模板在订阅解析之前呈现。
我尝试用ng-container包装模板，仍然得到相同的错误。
<ng-container *ngIf="activeUser">
<li class="nav-link"> <i class="text-center icon-speedometer pr-2"></i>Dashboard</li>
<div *ngIf="role === 'Accountant'">
<li class="nav-link title">ACCOUNTS</li>
<li class="nav-link "> <a href="javascript:void(0)" routerLink="/paysim-transactions"><i class="text-center icon-chart pr-2"></i>Paysim Transactions</a> </li>
<li class="nav-link "> <a href="javascript:void(0)" routerLink="/pos-transactions"><i class="text-center icon-chart pr-2"></i>POS Transactions</a></li>
<li class="nav-link "> <a href="javascript:void(0)" routerLink="/reversal-logs"><i class="text-center icon-chart pr-2"></i>Reversal Logs</a></li>
<li class="nav-link "> <a href="javascript:void(0)" routerLink="/customers"><i class="text-center icon-user pr-2"></i>View Customers</a></li>
</div>
<div *ngIf="role === 'Customer Success'">
<li class="nav-link title">CUSTOMER SUCCESS</li>
<li class="nav-link "> <a href="javascript:void(0)" routerLink="/agents"><i class="text-center icon-chart pr-2"></i>View Agents</a> </li>
</div>
<div *ngIf="role === 'Super Admin'">
<li class="nav-link title">ADMIN</li>
<li class="nav-link "> <a href="javascript:void(0)" routerLink="/admin"><i class="text-center icon-settings pr-2"></i>Settings</a> </li>
</div>
</ng-container>
activeUser;
activeUserChecker = false;
role;
getActiveUser() {
this.connection.creating = true;
this.adminService.getActiveUser().subscribe((data: any) => {
this.activeUser = data;
this.role = data.role;
this.activeUserChecker = true;
this.connection.creating = false;
});
}
ngOnInit(): void {
this.getActiveUser();
}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-14 21:06:10
原因是浏览器获取你请求的数据要比处理html内容花费更多的时间。
确保订阅已在您的模板中结束的最佳方法是使用async pipe。
activeUser$;
activeUserChecker = false;
role;
getActiveUser() {
this.connection.creating = true;
this.activeUser$ = this.adminService.getActiveUser();
}
ngOnInit(): void {
this.getActiveUser();
} <ng-container *ngIf="activeUser$ | async">
<li class="nav-link"> <i class="text-center icon-speedometer pr-2"></i>Dashboard</li>
<div *ngIf="(activeUser$ | async).role === 'Accountant'">
<li class="nav-link title">ACCOUNTS</li>
<li class="nav-link "> <a href="javascript:void(0)" routerLink="/paysim-transactions"><i class="text-center icon-chart pr-2"></i>Paysim Transactions</a> </li>
<li class="nav-link "> <a href="javascript:void(0)" routerLink="/pos-transactions"><i class="text-center icon-chart pr-2"></i>POS Transactions</a></li>
<li class="nav-link "> <a href="javascript:void(0)" routerLink="/reversal-logs"><i class="text-center icon-chart pr-2"></i>Reversal Logs</a></li>
<li class="nav-link "> <a href="javascript:void(0)" routerLink="/customers"><i class="text-center icon-user pr-2"></i>View Customers</a></li>
</div>
<div *ngIf="role === 'Customer Success'">
<li class="nav-link title">CUSTOMER SUCCESS</li>
<li class="nav-link "> <a href="javascript:void(0)" routerLink="/agents"><i class="text-center icon-chart pr-2"></i>View Agents</a> </li>
</div>
<div *ngIf="role === 'Super Admin'">
<li class="nav-link title">ADMIN</li>
<li class="nav-link "> <a href="javascript:void(0)" routerLink="/admin"><i class="text-center icon-settings pr-2"></i>Settings</a> </li>
</div>
</ng-container>Stack Overflow用户
发布于 2021-04-14 18:09:15
As stated in
https://angular.io/guide/structural-directives
https://angular.io/api/common/NgIf
The asterisk, *, syntax on a structural directive, such as *ngIf, is shorthand that Angular interprets into a longer form. Angular transforms the asterisk in front of a structural directive into an <ng-template> that surrounds the host element and its descendants.
Reference :
https://stackoverflow.com/questions/44837756/why-ngif-doesntwork-with-ng-template
You can use it as:
<div *ngIf="condition; else otherTemplate">
...
</div>
<ng-template #otherTemplate>
</ng-template> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67089310
复制相关文章
相似问题
腾讯云开发者
