Angular 5-在* ng內部調用的Mat-tab方法用於執行多次

Question

我懷疑當我在* 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);
  }

}

Answer 1

您使用*ngFor的方式對我來說似乎是錯誤的，應該是{{ tab.getTabName }}並且
改為{{ tab.getTabCount }} 。