Angular中matListItemTitle指令失效问题求助

可能原因及对应解决方案 #

1. Angular Material版本不匹配 #

你参考的是Angular Material最新预览版（next）文档，若项目使用旧版本，指令用法会不兼容：

• 15+版本：使用matListItemTitle/matListItemLine指令（和官方示例一致）
• 14及以下版本：需改用CSS类名而非指令，替换代码中的span标签：

  <span class="mat-list-item-title">{{picture.name ?? '无标题'}}</span>
  <span class="mat-list-item-line">{{picture.description ?? '无描述'}}</span>
  

2. 结构不符合组件要求 #

即使版本正确，也需要确保指令是mat-list-item的直接子元素，且建议使用div而非span（官方示例采用块级元素，确保样式正确应用）：

<mat-list *ngIf="gallery && gallery.pictures && gallery.pictures.length > 0">
  <mat-list-item *ngFor="let picture of gallery.pictures ?? []" class="list-row">
    <img class="list-picture" [src]="getUrl(picture.id ?? -1, true)" [alt]="picture.name ?? 'Bild'">
    <div matListItemTitle>{{picture.name ?? '无标题'}}</div>
    <div matListItemLine>{{picture.description ?? '无描述'}}</div>
  </mat-list-item>
</mat-list>

3. IDE缓存导致的误提示 #

WebStorm的警告可能是缓存问题，可通过以下步骤解决：

• 重启WebStorm
• 执行File → Invalidate Caches...清除缓存并重启

验证步骤 #

1. 查看package.json中的@angular/material版本，确认对应用法
2. 替换标签/指令后，重新构建项目
3. 检查浏览器元素样式，确认mat-list-item-title/mat-list-item-line相关样式是否正确应用

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