функция, запускаемая элементом Html, выполняющимся перед ответом на сервис - PullRequest
Новая
       15

функция, запускаемая элементом Html, выполняющимся перед ответом на сервис

0 голосов
/ 16 мая 2018

У меня есть простой компонент, который отображает список ссылок. Каждая ссылка должна отображаться \ скрываться в соответствии с разрешениями. Чтобы получить набор разрешений, я должен использовать сервис. Это упрощенная версия 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;
 }

Проблема в том, что функция isVisible вызывается, когда служба еще не ответила, а reportsPersmissions не определена. Я мог бы придумать другой вариант добавления 

*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>

Это правильный способ сделать это или есть лучший способ (лучшая практика) сделать это?

1 Ответ

0 голосов
/ 16 мая 2018

Другой вариант - вычислить условие 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"

В вашем случае, я не думаю, что это может вызвать проблемы с производительностью, но взгляните на эту запись .

...