mat-list-item 不计算子组件中的"mat-line"类

Question

Angular材质列表(mat-list)有子元素(mat-list-item)。当它呈现列表时，它会计算每个项目包含的行数(基于一个css类"mat-line")。

如果"mat-list-item"来自angular子组件，它(mat-list)不计算"mat-line";CSS类，不添加"mat-2-line";mat-list-item"而且布局看起来很糟糕。

有没有人知道如何使它计数的行在子组件?

下面是一个示例应用程序来演示这个问题:

https://stackblitz.com/edit/angular-nzhubj?file=src%2Fapp%2Fapp.component.html

谢谢!

Answer 1

尝试在您的垫行条目周围添加一些空div，例如:

<mat-list>
<div mat-subheader>Folders</div>
<mat-list-item *ngFor="let folder of folders">
<mat-icon mat-list-icon>folder</mat-icon>
<div class="left">
<p mat-line>
{{folder.name}}
</p>
<p mat-line>
{{folder.updated | date}}
</p>
</div>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item *ngFor="let folder of folders">
<my-list-item [section]="folder"></my-list-item>
</mat-list-item>
</mat-list>

或者像这样:

<mat-list>
<div mat-subheader>Folders</div>
<mat-list-item *ngFor="let folder of folders">
<mat-icon mat-list-icon>folder</mat-icon>
<div class="left">
<p mat-line>
{{folder.name}}
</p>
</div>
<div class="right">
<p mat-line>
{{folder.updated | date}}
</p>
</div>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item *ngFor="let folder of folders">
<my-list-item [section]="folder"></my-list-item>
</mat-list-item>
</mat-list>