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

【问题标题】：mat-list-item does not count "mat-line" classes in a child componentmat-list-item 不计算子组件中的“mat-line”类
【发布时间】：2021-05-05 01:10:19
【问题描述】：

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

谢谢！

【问题讨论】：

标签： angular angular-material

【解决方案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>

【讨论】：