时间戳

首页 > 解决方案 > mat-list-item 不计算子组件中的“mat-line”类

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

问题描述

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

谢谢！

标签： angularangular-material

解决方案

尝试在 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>

推荐阅读