-1

我有一个显示链接列表的简单组件。每个链接都应根据权限显示\隐藏。为了获得权限集，我应该使用服务。这是 HTML 的精简版本：

<a *ngIf=isVisible(10) routerLink=".." [queryParams]="{id:'10'}">bla1</a>     
<a *ngIf=isVisible(40) routerLink=".." [queryParams]= "{id:'20'}">bla2</a>

这是组件：

constructor(private reportService : service) {}

ngOnInit() {
  this.reportService.GetReportsPermissions().subscribe(result => 
    {
      this.reportsPersmissions = result;
    }, error => { console.log(error)});
 }

 isVisible(reportTypeID : ReportType) : boolean
 {
   return typeof this.reportsPersmissions != 'undefined' && 
     this.reportsPersmissions.find(rp => rp.ReportType == 
     reportTypeID).IsPermitted;
 }

问题是当服务还没有响应并且reportsPersmissions 未定义时调用isVisible 函数。我可以想到另一种添加选项

*ngIf= reportsPersmissions

声明为围绕链接列表的容器 div：

<div *ngIf=reportsPersmissions> //Optional - see below
  <a *ngIf=isVisible(10) routerLink=".." [queryParams]="{id:'10'}">bla1</a>     
  <a *ngIf=isVisible(40) routerLink=".." [queryParams]= "{id:'20'}">bla2</a>        
</div>

这是正确的方法还是有更好的方法（最佳实践）？

4

1 回答 1

1

另一种选择是计算isVisible条件NgOnInit，然后将其ngIf作为变量而不是函数放入，这可能会导致性能问题（因为它是在摘要循环中执行的）。

ngOnInit() {
    this.reportService.GetReportsPermissions().subscribe(result => {
        this.reportsPersmissions = result;

        // Iterate over the reports and calculate the isVisible variable here

    }, error => { console.log(error)});
}

*ngIf="report.isVisible"

在您的情况下，我认为这不会导致性能问题，但请查看这篇文章。

于 2018-05-16T06:54:18.930 回答