请参阅this Stackblitz。
Angular Material mat-expansion-panel允许lazy rendering,
<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>
在隐藏的组件内呈现时,例如关闭的mat-sidenav,mat-expansion-panel呈现错误(Stackblitz example):
这在很多方面都是一团糟,尤其是因为我将mat-expansion-panel定义为折叠(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-accordion中的两个扩展面板:
<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就像它可能得到的那样简单:
<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 issues/5269上进行了长时间的讨论。虽然问题仍未解决,但being reported已解决此问题angular/material v7。
答案 0 :(得分:1)
问题在于* ngIf。第一次它无法使它成为现实。这就是我使用setTimeout()将其设置为真的原因。
如果您还有问题请告诉我。我会尽力帮忙。
工作链接
答案 1 :(得分:0)
这肯定是5.x版本的问题,应该可以立即使用。
如果我在HTML中设置了扩展面板[expanded]属性,或者在构造函数或组件生命周期事件中对其进行了初始化,则没有任何效果。
即使来自stackblitz的工作示例也无法在动态组件内部本地工作! https://stackblitz.com/angular/bbjxooxpqmy?file=app%2Fexpansion-overview-example.html
但是,如果将结构指令与异步数据/在组件初始化和呈现后发出的Observable一起使用,它将起作用...
使用间隔或超时是可行的,但是它不是一个好的解决方案,因为在台式机和移动设备等不同设备上,加载和渲染时间差别很大!
答案 2 :(得分:0)
关于这一点,请注意,这可能是因为您需要将expanded
属性包装在方括号中,否则您将传入一个字符串"false"
,该字符串的值将为true。 / p>
应该是:
<mat-expansion-panel [expanded]="false">