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

Question

Angular 材质列表 (mat-list) 具有子元素 (mat-list-item)。当它呈现列表时，它会计算每个项目包含多少行（基于 css 类“mat-line”）。

如果“mat-list-item”的内容来自角度子组件，则它（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

尝试在 mat-line 条目周围添加一些空 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>