微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

传递给 mat 选项卡中 selectedIndex 的变量值不起作用只有当直接号码传递给它时它才工作

如何解决传递给 mat 选项卡中 selectedIndex 的变量值不起作用只有当直接号码传递给它时它才工作

我想动态地将 mat 标签添加到 mat 标签组。数字选项卡仅限于 5 个选项卡,但是当我添加新选项卡时,认情况下不会选择新创建的选项卡。只有当我直接输入数字时它才会被选中。但是当我传递数组长度时它不起作用。

HTML 代码

<mat-tab-group #tabGroup mat-align-tabs="start" class="calc_left_panel 
    (selectedTabChange)="addTab($event,tabGroup)" [(selectedindex)]="selectedTab" mat-stretch-tabs 
    dynamicHeight>    
    <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
      <ng-template mat-tab-label>
       <span >{{tab}}       
       <button [disabled]="tabs.length === 1" (click)="removeTab(index)" class="btn_without_bkg"><mat-icon>close</mat-icon></button> </span></ng-template></mat-tab>
<mat-tab label="+" *ngIf= "tabs.length < 5">
  <ng-template mat-tab-label >
      <button class="btn_without_bkg btn_plus" fxLayoutAlign="end end"
      >+</button>
 </ng-template>
  <button class="btn_without_bkg" mat-button (click)="tabGroup.selectedindex=selectedTab">Go to new tab</button>
  </mat-tab>
Component Code:

    addTab(event: MatTabChangeEvent,tabGroup:MatTabGroup){
        if(event.tab.textLabel === "+")
         {
         const count=this.tabs.length + 1;
         this.tabLable= "Calc. " + count;
         this.tabs.push(this.tabLable);
         this.selectedTab=this.tabs.length-1;
         tabGroup.selectedindex= this.tabs.length-1;     
         setTimeout(() => this.selectedTab =  this.tabs.length-1,1) 
    
          } else{
            console.log('event.index is: ',event.index,'Other tab clicked');
            
          }
      }

我已经尝试了所有可能的解决方案。相同的按钮在选项卡内容中起作用,但在选项卡组中的选项卡标签或选项卡更改事件中不起作用。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。