垫子对话框上的垫子选项卡在选定索引异步更改时不起作用

Question

我在垫子对话框上渲染垫子选项卡时遇到问题。我使用 selectedIndex 动态选择选项卡的索引，我想异步更改它，例如服务器端调用或 setTimeout。但它不起作用。选项卡正文不显示该索引的内容。我在堆栈闪电战中重现它。

https://stackblitz.com/edit/mat-tabs-on-mat-dialog-problem

注意：我知道可以使用 setTimeout 和 500ms 来解决。但这不是预期的解决方案。

Answer 1

您可以通过添加*ngIf指令来确保内容的显示。这确保了内容的显示，但它会使您在开始时丢失动画：

<mat-tab-group *ngIf="selectedIndex!=undefined" [selectedIndex]="selectedIndex">
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Answer 2

您可以通过传递selectedIndex来解决问题app.component.ts

import { Component, OnInit } from '@angular/core';
import {MatDialog} from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit{
public index = { selectedIndex: 0 }
constructor(public dialog: MatDialog) {}
ngOnInit() {
setTimeout(() => this.index.selectedIndex = 1, 100)
}
openDialog() {
const dialogRef = this.dialog.open(DialogComponent, { data: this.index });
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
}

在DialogComponent中，您可以通过注入MAT_DIALOG_DATA来获取数据

constructor(@Inject(MAT_DIALOG_DATA) public data) { }

最后，下面是dialog.component.html的代码示例

<mat-tab-group [selectedIndex]="data.selectedIndex">
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>