垫子扩展面板懒惰渲染被破坏了吗？

Question

见这个斯塔克布利茨。

角材料垫子-膨胀板允许延迟渲染，

<mat-expansion-panel>
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>

  <ng-template matExpansionPanelContent>
    Some deferred content
  </ng-template>
</mat-expansion-panel>

当在隐藏组件(例如，关闭的席德纳 )中呈现时，垫子-膨胀板呈现错误(Stackblitz示例)：

​

​

这在很多方面都很混乱，尤其是因为我定义了要折叠的垫膨胀面板(expanded="false")：

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

            <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>

单击展开面板的标题可以展开面板(应该是这样)，并正确地呈现内容：

​

​

有趣的是，折叠面板显示了面板最初应该如何呈现：

​

​

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

<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>

CSS只是为调试添加了一些颜色：

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>

更新

在GitHub，问题/5269上对此进行了长时间的讨论。虽然问题仍未解决，但被报告认为这个问题是用角度/材料v7解决的。

Answer 1

问题都是关于*恩。第一次，它无法使它成为现实。这就是我使用setTimeout()将其设置为真的原因。

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

工作环节

https://stackblitz.com/edit/deferred-expansion-panel-broken-b2vurz?file=app%2Fside-menu%2Fside-menu.component.ts

Answer 2

这绝对是5.x版本的问题，这应该是开箱即用的。

如果我在html中设置了展开面板，或者在构造函数或组件生命周期事件中初始化了属性，那么什么都不会起作用。

即使stackblitz中的工作示例在动态组件中也不能在本地工作！https://stackblitz.com/angular/bbjxooxpqmy?file=app%2Fexpansion-overview-example.html

但是，如果结构指令与在组件初始化和呈现之后发出的异步数据/可观测数据一起使用，那么它将工作.

使用间隔或超时是有效的，但是它不是一个好的解决方案，因为加载和呈现时间在不同的设备上有很大的差异，比如桌面和移动设备！

Answer 3

请注意，这可能是因为您需要将expanded属性包装在方括号中，否则您将传入一个"false"字符串，该字符串的值将为true。

它应该是：

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