Angular 角度材料-添加后选择新选项卡-事先没有选项卡时发布

免责声明：我的问题是关于一个特殊情况的。我想创建一个选项卡组，在最后一个位置有一个“+”选项卡，可以创建更多选项卡，除了这个“+”选项卡，没有初始选项卡。链接的问题提供了一个包含三个初始标签的工作stackblitz，这不是我的情况。如果删除这些初始选项卡，则会出现下面描述的错误行为

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

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

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>

---

这里的问题是选项卡数组和实际选项卡数不同步

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

首先，将选择的初始值设置为-1

 selected = new FormControl(-1);

其次，将方法更改为使用lastIndexOf，我假设如果添加了同名的选项卡，您希望选择新创建的选项卡

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

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

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