Question

我有一个如下所示的席子列表

<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>

如果找不到头像，我想用头号的第一个字母替换头像。我怎样才能做到这一点？任何帮助表示赞赏？

Answer 1

您可以按如下方式使用ngIf。您没有在问题中提及或使用它，但我假设每个person对象都在person.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>

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

1 个答案: