Question

我是新手，对它还不了解。我正在我的有角度的应用程序中显示人员列表。如果找不到该人的照片，我想将其名字和姓氏的首字母显示为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

您可以在组件中创建method或为此创建自定义角度pipe

创建一种获取短名称的方法

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>

Answer 2

最直接的方法是为此编写一个自定义的 pipe ：https://angular.io/guide/pipes

管道充当单向转换器，一些模型值输入，一些显示值输出。编写完管道后，模板就是：

<div class="s-name">
    {{user.full_name | myCustomNamePipe }}
</div>

您还可以将其绑定到组件上的方法。但这由于更改检测的工作方式而效率低下：

<div class="s-name">
    {{ getNamePieces(user) }}
</div>

最后，如果您只有一个用户视图模型并在显示之前选择了它（使用map）；您可以直接绑定到计算所得的属性。

Answer 3

我对@malbarmavi 的解决方案进行了一些改进https://stackoverflow.com/a/51621024/3954417

刚刚在管道中添加了一个参数，因此您可以设置要显示的字符数。

shortName.pipe.ts

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

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

模板

{{'My Name' | shortName:2}}

demo ?

以角类型获取全名的首字母crip * ngFor

3 个答案: