Angular Material：无法为mat-list-item添加mat-divider求助

问题原因 #

你当前把<mat-divider>放在<mat-list-item>内部，而<mat-list-item>是flex布局容器，分隔线会被当作flex子元素处理，导致无法正常显示。同时默认的mat-divider受列表内边距限制，无法直接实现全屏宽度。

解决方案 #

1. 调整DOM结构

将分隔线移到<mat-list-item>外部，并用*ngIf控制最后一个列表项不显示分隔线：

<mat-list>
  <ng-container *ngFor="let folder of folders; let last = last">
    <mat-list-item>
      <img
        matListItemAvatar
        src="https://material.angular.io/assets/img/examples/shiba1.jpg"
        alt="Photo of a Shiba Inu"
      />
      <div matListItemTitle>{{folder.name}}</div>
      <div matListItemLine>{{folder.updated | date}}</div>
      <div matListItemLine>{{folder.updated | date}}</div>
      <span matListItemMeta><mat-icon matListItemIcon>folder</mat-icon></span>
    </mat-list-item>
    <!-- 最后一项不显示分隔线 -->
    <mat-divider *ngIf="!last" [inset]="false"></mat-divider>
  </ng-container>
</mat-list>

• [inset]="false"：确保分隔线不缩进，对齐列表边缘。

2. 实现全屏宽度分隔线

默认<mat-list>有16px左右内边距，需通过CSS抵消该内边距实现全屏：

/* 组件样式文件中添加 */
.full-width-divider {
  margin: 0 -16px;
  width: calc(100% + 32px);
}

然后给<mat-divider>添加类名：

<mat-divider *ngIf="!last" [inset]="false" class="full-width-divider"></mat-divider>

3. 自定义宽度

若不需要全屏，可调整margin和width值：

• 比如要让分隔线宽度比列表窄20px：

.custom-width-divider {
  margin: 0 10px;
  width: calc(100% - 20px);
}

内容的提问来源于stack exchange，提问作者user7394420