Angular 5 - метод Mat-tab, вызываемый изнутри * ng, для получения многократного выполнения - PullRequest
Новая
       23

Angular 5 - метод Mat-tab, вызываемый изнутри * ng, для получения многократного выполнения

0 голосов
/ 20 октября 2018

Я сомневаюсь, что когда я вызываю функцию внутри * ngFor, она выполняется несколько раз, на число больше, чем элементы в массиве tabsName .Вот код ниже: 

     <mat-tab-group>
      <mat-tab  *ngFor="let tab of tabsName">
        <ng-template mat-tab-label>
          {{getTabName(tab)}}
          <span class="badge">{{getTabCount(tab)}}</span>
        </ng-template>
        <div *ngTemplateOutlet="comments"></div>
      </mat-tab>
    </mat-tab-group>  


    <ng-template #comments>
      <div class="col-sm-9 jj-pad-0">Deep</div>
</ng-template>

После реализации всех хуков жизненного цикла компонента узнал, что некоторые методы хуков жизненного цикла вызываются снова и снова.

Я хотел знать, это правильное поведение или нет?

Свойства tabsName - это имя и количество.Имя и счет, которые я получаю от службы, выполняющей вызов покоя.

tabsName: [{name: 'tab1', count: '2'}, {name: 'tab2', count: '1'}]

Ниже приведен файл ts. 

export class TabsComponent implements OnInit {

  @Input() tabsName: any;
  @Input() template: TemplateRef<any>;
  @Output() tabSelected: EventEmitter<any> = new EventEmitter();

  constructor(private service: SomeService) {

  }

getTabName(tab): string {

    return this.service.configData[tab]['UILabel'];
  }

  getTabCount(tab): number {
    if (this.service.dataMap) {
      return this.service.dataMap.get(this.service.configData[tab]['dataType']).data.length;
    }
  }

  onSelect(event) {
    this.tabSelected.emit(event);
  }

}

1 Ответ

0 голосов
/ 21 октября 2018

То, как вы используете *ngFor, кажется мне неправильным, вместо него должно быть {{ tab.getTabName }} и
{{ tab.getTabCount }}.

...