向 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 *ngFor="让客户的客户；让索引 = 索引"class="fullHeight no-vertical-scroll no-horizo​​ntal-scroll"><div>每个标签的内容

</mat-tab><mat-tab tooltip="New Tab";class="fullHeight no-vertical-scroll";标签=新标签"><ng-template mat-tab-label class="fullWidth"><span><mat-icon>add</mat-icon></span></ng-模板></mat-tab></mat-tab-group>

谢谢罗

解决方案

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

检查以下示例:

<按钮垫凸起按钮class="example-add-tab-button";(click)=addTab(selectAfterAdding.checked)">添加新标签<mat-checkbox #selectAfterAdding>添加</mat-checkbox>后选择选项卡
<mat-tab-group [selectedIndex]=selected.value"；(selectedIndexChange)=selected.setValue($event)"><mat-tab *ngFor="let tab of tabs;让索引 = 索引"[标签]=标签">{{tab}} 选项卡的内容</mat-tab><mat-tab 禁用><ng-template mat-tab-label><button mat-icon-button (click)="addTab(selectAfterAdding.checked)"><mat-icon>add_circle</mat-icon></ng-模板></mat-tab></mat-tab-group>

Ts 文件

 tabs = ['First', 'Second', 'Third'];选择 = 新的 FormControl(0);addTab(selectAfterAdding: boolean) {this.tabs.push('New');如果(选择后添加){this.selected.setValue(this.tabs.length - 1);}}removeTab(索引:数字){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屋！