Javascript mat扩展面板是否损坏？

看

角材料允许

单击扩展面板的标题将扩展面板（按其应该的方式），并正确呈现内容：

有趣的是，折叠面板显示了面板最初的渲染方式：

我的Stackblitz示例和本问题中的屏幕截图都显示了一个mat手风琴中的两个扩展面板：

<mat-tab-group>
    <mat-tab label="Empty">
        <p>This is an empty tab</p>
    </mat-tab>
    <mat-tab label="Accordion">
        <div class="mat-typography">
            <mat-accordion>
                <mat-expansion-panel expanded="true">
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            <span>First</span>
                        </mat-panel-title>
                    </mat-expansion-panel-header>
                    <ng-template matExpansionPanelContent>
                        <!-- Deferred initialization until the panel is open. -->
                        <span>You shouldn't see me yet!</span></ng-template>
                    <mat-action-row>
                        <button mat-button>Click me</button>
                    </mat-action-row>
                </mat-expansion-panel>
                <mat-expansion-panel expanded="false">
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            <span>Second</span>
                        </mat-panel-title>
                    </mat-expansion-panel-header>
                    <ng-template matExpansionPanelContent>
                        <!-- Deferred initialization until the panel is open. -->
                        <span>Shouldn't see me either!</span></ng-template>
                    <mat-action-row>
                        <button mat-button>Click me</button>
                    </mat-action-row>
                </mat-expansion-panel>
            </mat-accordion>
        </div>
    </mat-tab>
</mat-tab-group>

mat sidenav尽可能做到以下几点：

<mat-sidenav-container>
    <mat-sidenav #snav class="mat-elevation-z8">
        <app-side-menu></app-side-menu>
    </mat-sidenav>
    <mat-sidenav-content>
        <div>
            <button mat-icon-button (click)="snav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

.  虽然这个问题仍然悬而未决，但问题是在2005年解决的
 问题在于*ngIf。第一次它不能使它成为现实。这就是为什么我要使用setTimeout（）将其设置为true

如果你还有问题，一定要告诉我。我会尽力帮忙的

工作环节

这肯定是5.x版本的问题，应该可以开箱即用

如果我在html中设置了扩展面板[expanded]属性，或者在构造函数或组件生命周期事件期间初始化了该属性，则没有任何效果

即使是stackblitz的工作示例也不能在动态组件内部本地工作！

然而，若结构指令用于在组件初始化和呈现后发出的异步数据/观察值，它将工作

使用间隔或超时可以工作，但这不是一个好的解决方案，因为加载和渲染时间在不同的设备（如桌面和移动设备）上差异很大
 请注意，这可能是因为您需要将
扩展的
属性包装在方括号中，否则您将传递一个字符串
“false”
，该字符串将计算为true

应该是：

<mat-expansion-panel [expanded]="false">


你能链接更多详细解释这一点的资源吗？问题是，这种方法导致每次用户选择不同的选项卡时（即，
ngOnInit
和
ngondestry
都会重复运行）组件被销毁和初始化
mat-expansion-panel {
  background-color: grey;
}

mat-expansion-panel:first-child mat-expansion-panel-header {
  background-color:red;
}
mat-expansion-panel:last-child  mat-expansion-panel-header {
  background-color:blue;
}

mat-expansion-panel button {
  background-color: yellow;
}

<mat-sidenav-container>
    <mat-sidenav #snav class="mat-elevation-z8">
        <app-side-menu></app-side-menu>
    </mat-sidenav>
    <mat-sidenav-content>
        <div>
            <button mat-icon-button (click)="snav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

<mat-expansion-panel [expanded]="false">