向 mat-tab-group 動態添加新標簽

Question

我正在使用 Angular v8 和 Angular Materials。 特別是 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>

謝謝羅

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);
  }

堆疊閃電戰示例

更新

您可以通過在包含實際選項卡的數組之后添加選項卡來添加位於選項卡最后的 + 按鈕，如下所示：

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