Angular 5 - 在 *ngFor 内部调用的 Mat-tab 方法被多次执行

Posted 2023-02-23

【中文标题】Angular 5 - 在 *ngFor 内部调用的 Mat-tab 方法被多次执行

【英文标题】：Angular 5 - Mat-tab method called inside *ngFor getting executed mutilple times

【发布时间】：2019-03-25 03:41:13

【问题描述】：

我怀疑当我在 *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】：

您使用*ngFor 的方式对我来说似乎是错误的，它应该是 tab.getTabName 和 tab.getTabCount 。

【讨论】：

感谢您的评论。根据我的要求，我必须在 getTabCount 和 getTabName 函数中传递选项卡，例如 getTabCount(tab1) 或 getTabCount(tab2) 并获取该特定选项卡的计数。您能建议我如何实现这一目标吗？

您可以编辑问题并添加必要的 .ts 文件和与 tabsName 相关的属性吗？以及从哪里获得 getTabCount、getTabName。

我已经更新了这个问题，希望它现在有所帮助。如果您仍有任何疑问，请告诉我。