动态地将新标签添加到mat-tab-group [英] Dynamically adding a new tab to mat-tab-group

问题描述

我正在使用Angular v8和Angular材质.特别是mat-tab-group和mat-tab.我想要类似下面的内容.我希望能够点击"+"(看起来像一个标签页)，结果是它将创建一个新的标签页

单击"+"后，我们将看到以下内容(焦点位于我们刚刚添加的新标签上)

如果我在mat-tab-group上方有一个按钮(它添加了一个新的标签)，则一切正常，但我们希望使用"+"号.位于选项卡列表的末尾(如上所示).我可以创建选项卡，但是没有重点.

我的代码看起来像.在 setSelectedIndex 方法调用中，我添加了一个新的客户对象，然后为其设置了selectedIndex.但是没有喜悦.下面的代码示例.如有需要，可以尝试添加为plunkr

 < mat-tab-groupclass ="no-vertical-scroll"[disableRipple] ="true"；animationDuration ="0ms"(selectedTabChange)="setSelectedIndex($ event)"；(focusChange)＝"onFocusChange($ event)".[selectedIndex] ＝"selectedTabIndex".style ="margin-top:10px;"< mat-tab * ngFor ="让客户成为客户；让索引=索引class ="fullHeight no-vertical-scroll no-horizo​​ntal-scroll">< div>每个标签的内容</div></mat-tab>< mat-tab tooltip =新标签"class ="fullHeight no-vertical-scroll"标签=新标签页"< ng-template mat-tab-label class ="fullWidth">< span></mat-icon>/span></ng-template></mat-tab></mat-tab-group> 

感谢Ro

解决方案

您可以尝试使用数组创建选项卡，并使用ngFor绑定，然后您可以更改数组以将更改反映到您的标签，例如添加和删除.

检查以下示例:

 < div><按钮垫子升起的按钮class ="example-add-tab-button"(click)="addTab(selectAfterAdding.checked)"添加新标签</button>< mat-checkbox#selectAfterAdding>添加</mat-checkbox>之后，选择标签.</div>< mat-tab-group [selectedIndex] ="selected.value"(selectedIndexChange)＝"selected.setValue($ event)".< mat-tab * ngFor ="让标签页中的标签页；让索引=索引"[label] ="tab">{{tab}}标签的内容</mat-tab>< mat-tab已禁用>< ng-template mat-tab-label>< button mat-icon-button(点击)="addTab(selectAfterAdding.checked)"< mat-icon> add_circle</mat-icon></button></ng-template></mat-tab></mat-tab-group> 

Ts文件

 选项卡= ['First'，'Second'，'Third'];selected =新的FormControl(0);addTab(selectAfterAdding:boolean){this.tabs.push('New');如果(selectAfterAdding){this.selected.setValue(this.tabs.length-1);}}removeTab(index:number){this.tabs.splice(index，1);} 

I'm using Angular v8 and Angular Materials. In particular mat-tab-group and mat-tab. I want to have something like the below. I want to be able to click on the "+" (which looks like a tab) and the result would be that it would create a new tab

After clicking on the "+" we'd see as below (focus is on the new tab we just added)

If I have a button above the mat-tab-group (which adds a new tab) all works fine but we want the "+" to be at the end of the tab list (as shown above). I can get the tab to create but focus doesn't got to it.

My code looks like. In the setSelectedIndex method call I add a new customer object and then set the selectedIndex to it. But no joy. Code sample below. Can try add as a plunkr if needs be

<mat-tab-group
        class="no-vertical-scroll"
        [disableRipple]="true"
        animationDuration="0ms"
        (selectedTabChange)="setSelectedIndex($event)"
        (focusChange)="onFocusChange($event)"
        [selectedIndex]="selectedTabIndex"
        style="margin-top: 10px;">

    <mat-tab *ngFor="let customer of customers; let index = index"
             class="fullHeight no-vertical-scroll no-horizontal-scroll">

        <div>
            content for each tab
        </div>

    </mat-tab>

    <mat-tab tooltip="New Tab" class="fullHeight no-vertical-scroll" label="New Tab">
        <ng-template mat-tab-label class="fullWidth">
            <span><mat-icon>add</mat-icon></span>
        </ng-template>
    </mat-tab>

</mat-tab-group>

Thanks Ro

解决方案

You can try creating tabs using an array and bind it using ngFor, Then you can alter the array which will reflect changes into your tabs such as adding and removing.

Check the following example:

<div>
      <button mat-raised-button
              class="example-add-tab-button"
              (click)="addTab(selectAfterAdding.checked)">
        Add new tab
      </button>
      <mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
    </div>
    
    <mat-tab-group [selectedIndex]="selected.value"
                   (selectedIndexChange)="selected.setValue($event)">
      <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
        Contents for {{tab}} tab
      </mat-tab>

   <mat-tab disabled>
    <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab(selectAfterAdding.checked)">
            <mat-icon>add_circle</mat-icon>
        </button>
    </ng-template>
   </mat-tab>

    </mat-tab-group>

Ts file

  tabs = ['First', 'Second', 'Third'];
  selected = new FormControl(0);

  addTab(selectAfterAdding: boolean) {
    this.tabs.push('New');

    if (selectAfterAdding) {
      this.selected.setValue(this.tabs.length - 1);
    }
  }

  removeTab(index: number) {
    this.tabs.splice(index, 1);
  }

stackblitz Example

Updated

you can add a + button located last in the tabs by adding a tab after the array containing the actual tabs as follows:

<mat-tab disabled>
    <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab(selectAfterAdding.checked)">
            <mat-icon>add_circle</mat-icon>
        </button>
    </ng-template>
</mat-tab>

这篇关于动态地将新标签添加到mat-tab-group的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！