Angular Material - 添加后选择新选项卡 - 事先没有选项卡时出现问题

Question

免责声明：我的问题是关于this question 的一个特例。我想在最后一个位置创建一个带有“+”标签的标签组，它可以创建更多标签，除了这个“+”标签之外没有初始标签。链接问题的The only answer 提供了一个带有三个初始选项卡的工作堆栈闪电战，这不是我的情况。如果我删除那些初始选项卡，我会得到下面描述的错误行为。

问题： 鉴于组中最初除了“+”选项卡之外没有任何选项卡，如果我单击此“+”选项卡，确实会创建一个新选项卡，但是焦点保持在“+”选项卡上，而不是按预期跳转到新创建的选项卡上。它继续使用更多新标签。 但是如果我创建第一个选项卡，选择它，然后单击“+”选项卡，那么新选项卡会在创建后按预期选择。

我在这里做错了什么？是什么引发了这种看似不一致的行为？

HTML：

<div>
  <span class="example-input-label"> Selected tab index: </span>
  <mat-form-field>
    <input matInput type="number" [formControl]="selected">
  </mat-form-field>
  <br>
  <span class="example-input-label"> New tab name: </span>
  <mat-form-field>
    <input matInput type="text" [formControl]="name">
  </mat-form-field>
</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

    <button mat-raised-button
            class="example-delete-tab-button"
            (click)="removeTab(index)">
      Delete Tab
    </button>
  </mat-tab>

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

打字稿：

export class TabGroupDynamicExample {
  tabs = [];
  selected = new FormControl(0);
  name = new FormControl('');

  addTab(tabName) {
    if (!this.tabs.includes(tabName)) {
      this.tabs.push(tabName);
      this.selected.setValue(this.tabs.indexOf(tabName));
    }
  }

  removeTab(index: number) {
    this.tabs.splice(index, 1);
    if (this.tabs.length > 0 && this.selected.value === this.tabs.length) {
      this.selected.setValue(this.selected.value - 1);
    }
  }
}

Stackblitz

Answer 1

这里的问题是标签数组和标签的实际数量不同步。

我在 3 个地方修改了 addTab 方法：

import { Component } from "@angular/core";
import { FormControl } from "@angular/forms";

@Component({
  selector: "tab-group-dynamic-example",
  templateUrl: "tab-group-dynamic-example.html",
  styleUrls: ["tab-group-dynamic-example.css"]
})
export class TabGroupDynamicExample {
  tabs = [];
  selected = new FormControl(-1);
  name = new FormControl("");

  addTab(tabName) {
    this.tabs.push(tabName);
    setTimeout(() => this.selected.setValue(this.tabs.lastIndexOf(tabName)));
  }

  removeTab(index: number) {
    this.tabs.splice(index, 1);
    if (this.tabs.length > 0 && this.selected.value === this.tabs.length) {
      this.selected.setValue(this.selected.value - 1);
    }
  }
}

首先，将selected的初始值设置为-1。

 selected = new FormControl(-1);

第二次更改使用lastIndexOf的方法，我假设如果添加了一个具有相同名称的选项卡，您希望选择新创建的选项卡。

最后，更改了在 setTimeout 中设置值的调用。这是为了解决组件和dom对标签的值之间的同步问题。

setTimeout(() => this.selected.setValue(this.tabs.lastIndexOf(tabName)));