Angular 材料标签组'；s[（selectedIndex）]=。。。装订很薄

我正在使用Angular和MaterialTables模块

我的组件中有一个选项卡列表，我使用mat tabs和ngFor显示该列表，另外还有一个带有加号按钮的禁用选项卡。单击加号按钮时，我想添加一个新选项卡，并立即关注该选项卡。（类似于浏览器选项卡的工作方式。）

这就是它的样子：

我通过双向属性绑定到mat选项卡组的selectedIndex属性，并从button click事件处理程序中的组件设置它来实现这一点

您可以看到，tabgroup的属性和绑定到它的属性在工作时是相等的

但是，我遇到了一个问题，如果我新加载页面并首先单击按钮，则属性绑定会以某种方式中断：

在任何选项卡上单击一次似乎可以永远解决问题。当您重新加载页面时，问题再次出现

根据我的理解，以下属性绑定将确保值始终相等，如果其中一个值发生更改，另一个值将随之更改：

[(selectedIndex)]="selectedIndexBinding"

那么，selectedIndex如何为1，而selectedIndexBinding如何为0

如何解决此问题

现场示例：

代码：

src/app/app.component.html

<mat-tab-group [(selectedIndex)]="selectedIndexBinding" #tabGroup>
  <mat-tab *ngFor="let tab of tabs">
    <ng-template mat-tab-label>
      {{ tab }}
    </ng-template>
  </mat-tab>
  <mat-tab disabled>
      <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab()">
          +
        </button>
      </ng-template>
  </mat-tab>
</mat-tab-group>

selectedIndex: {{ tabGroup.selectedIndex }}<br />
selectedIndexBinding: {{ selectedIndexBinding }}

<mat-tab-group [(selectedIndex)]="selectedIndexBinding" #tabGroup>
  <mat-tab *ngFor="let tab of tabs">
    <ng-template mat-tab-label>
      {{ tab }}
    </ng-template>
  </mat-tab>
  <mat-tab disabled>
      <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab($event)">
          +
        </button>
      </ng-template>
  </mat-tab>
</mat-tab-group>

selectedIndex: {{ tabGroup.selectedIndex }}<br />
selectedIndexBinding: {{ selectedIndexBinding }}

---

您的问题来自于设置新索引的方式，因为

按钮

以任何方式计算

选项卡

您需要检索原始的

mat选项卡组

：

@ViewChild('tabGroup', {static: false}) tab: MatTabGroup;

并直接设置所需的索引：

this.tab.selectedIndex = this.tabs.length - 1;

您可能会注意到我将其全部放在了一个

setTimeout

中。这是为了，setTimeout触发一个新的角度循环

代码：

src/app/app.component.html

<mat-tab-group [(selectedIndex)]="selectedIndexBinding" #tabGroup>
  <mat-tab *ngFor="let tab of tabs">
    <ng-template mat-tab-label>
      {{ tab }}
    </ng-template>
  </mat-tab>
  <mat-tab disabled>
      <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab()">
          +
        </button>
      </ng-template>
  </mat-tab>
</mat-tab-group>

selectedIndex: {{ tabGroup.selectedIndex }}<br />
selectedIndexBinding: {{ selectedIndexBinding }}

<mat-tab-group [(selectedIndex)]="selectedIndexBinding" #tabGroup>
  <mat-tab *ngFor="let tab of tabs">
    <ng-template mat-tab-label>
      {{ tab }}
    </ng-template>
  </mat-tab>
  <mat-tab disabled>
      <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab($event)">
          +
        </button>
      </ng-template>
  </mat-tab>
</mat-tab-group>

selectedIndex: {{ tabGroup.selectedIndex }}<br />
selectedIndexBinding: {{ selectedIndexBinding }}

---

您的问题来自于设置新索引的方式，因为

按钮

以任何方式计算

选项卡

您需要检索原始的

mat选项卡组

：

@ViewChild('tabGroup', {static: false}) tab: MatTabGroup;

并直接设置所需的索引：

this.tab.selectedIndex = this.tabs.length - 1;

您可能会注意到我将其全部放在了一个

setTimeout

中。这是为了，setTimeout触发一个新的角度循环

代码：

src/app/app.component.html

<mat-tab-group [(selectedIndex)]="selectedIndexBinding" #tabGroup>
  <mat-tab *ngFor="let tab of tabs">
    <ng-template mat-tab-label>
      {{ tab }}
    </ng-template>
  </mat-tab>
  <mat-tab disabled>
      <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab()">
          +
        </button>
      </ng-template>
  </mat-tab>
</mat-tab-group>

selectedIndex: {{ tabGroup.selectedIndex }}<br />
selectedIndexBinding: {{ selectedIndexBinding }}

<mat-tab-group [(selectedIndex)]="selectedIndexBinding" #tabGroup>
  <mat-tab *ngFor="let tab of tabs">
    <ng-template mat-tab-label>
      {{ tab }}
    </ng-template>
  </mat-tab>
  <mat-tab disabled>
      <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab($event)">
          +
        </button>
      </ng-template>
  </mat-tab>
</mat-tab-group>

selectedIndex: {{ tabGroup.selectedIndex }}<br />
selectedIndexBinding: {{ selectedIndexBinding }}

---

e.preventDefault（）是什么；在addTab处理程序中，在这种情况下该怎么办？我认为绑定方法会起作用，因为即使按钮也是一个选项卡，它的索引始终是tabs.length，我从未将其设置为该值，所以它不应该关注该选项卡。这有点奇怪，它没有。@nemkin你是对的，它没有什么特别的作用。我忘了把它取下来令人难以置信的是，没有比设置超时更好的解决方案了。动态加载此选项卡必须是一个常见的范例；在addTab处理程序中，在这种情况下该怎么办？我认为绑定方法会起作用，因为即使按钮也是一个选项卡，它的索引始终是tabs.length，我从未将其设置为该值，所以它不应该关注该选项卡。这有点奇怪，它没有。@nemkin你是对的，它没有什么特别的作用。我忘了把它取下来令人难以置信的是，没有比设置超时更好的解决方案了。动态加载此选项卡必须是一种常见的范例。