Question

我正在使用Angular v8和Angular材质。特别是mat-tab-group和mat-tab。我想要类似以下内容。我希望能够单击“ +”（看起来像一个选项卡），结果是它将创建一个新的选项卡

点击“ +”后，我们将看到以下内容（焦点位于我们刚刚添加的新标签上）

如果我在mat-tab-group上方有一个按钮（它添加了一个新的选项卡），则一切正常，但我们希望“ +”位于选项卡列表的末尾（如上所示）。我可以创建选项卡，但没有重点。

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

<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>

感谢Ro

Answer 1

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

检查以下示例：

<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文件

  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

已更新

您可以在标签的最后添加一个+按钮，方法是在包含实际标签的数组之后添加标签，如下所示：

<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添加新标签页

1 个答案: