问题描述
我想动态地将 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 (将#修改为@)