angular - 在 Angular typescript * ngFor中获取全名的首字母

Question

我是 Angular 的新手，对它还不是很了解。我正在我的 Angular 应用程序中显示人员列表。如果找不到该人的照片，我想将他们的名字和姓氏的首字母显示为 DP。我的代码如下所示:

<div class="people" *ngFor="let user of users">
    <div class="s-profile-icon">
        <img src={{user.picture}} alt="Profile" />
    </div>
    <div class="s-name">
        {{user.full_name}}
    </div>
</div>

我知道我可以使用 *ngIf在 user.picture检查图片是否为空？但我不知道如何获得名字的第一个字母。例如: 如果user.full_name包含 Mary Johnson 姓名和 user.picture是空的然后代替图片，它应该显示 MJ 代替图片。我可以设计圆圈来显示字母，只是想知道如何在循环中获取第一个字母。请帮助我

Answer 1

您可以在您的组件中创建一个方法或为此创建自定义 Angular 管道

创建一个获取简称的方法

getShortName(fullName) { 
  return fullName.split(' ').map(n => n[0]).join('');
}

模板

<div class="people" *ngFor="let user of users">
    <div class="s-profile-icon">
        <img src={{user.picture}} alt="{{getShortName(user.full_name)}}" />
    </div>
    <div class="s-name">
        {{getShortName(user.full_name)}}
    </div>
</div>

已更新 🔥

上面的答案被认为是一种不好的做法，因为该方法将在每个更改检测周期中运行，所以最好的方法是创建一个管道来获取短名称

shortName.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "shortName"
})
export class ShortNamePipe implements PipeTransform {
  transform(fullName: string): any {
    return fullName
      .split(" ")
      .map(n => n[0])
      .join("");
  }
}

模板

{{'My Name' | shortName}}

demo 🚀