Angular 如何在matListAvatar中显示姓名的第一个字母而不是图像？

我有一张垫子清单，如下所示

<mat-list>
  <mat-list-item *ngFor="let person of Persons">
    <img matListAvatar src="../../../assets/images/person.svg" [alt]="person.firstName">
    <h3 matLine> {{Person.name }} </h3>
    <mat-divider></mat-divider>
  </mat-list-item>
</mat-list>

{{Person.name}

---

如果找不到头像，我想用人名的第一个字母替换头像。我该怎么做？非常感谢您的帮助。

您可以使用

ngIf

，如下所示。您在问题中没有提到或使用它，但我假设每个

人物

对象都有自己的化身url保存在

人物.avatar

中

<mat-list>
  <mat-list-item *ngFor="let person of Persons">

    <img *ngIf="person.avatar; else noAvatar" matListAvatar 
         [src=]"'../../../assets/images/' person.avatar + '.svg'" 
         [alt]="person.firstName">
    <ng-template #noAvatar>{{person.name.chartAt(0)}}</ng-template>

    <h3 matLine> {{Person.name }} </h3>
    <mat-divider></mat-divider>
  </mat-list-item>
</mat-list>

{{person.name.chartAt（0）}
{{Person.name}

感谢您的回答@Bunyamin Coskuner。实际上，这看起来不错。