angular - 使用切片管道后如何连接字符串

Question

我是 Angular 的新手。我想剪切长度超过 15 个字符的短字符串(比如)，然后添加 ...在末尾。
例如:

Name: Tanzeel,

Role: Intern

Address: Bangal...,

Likes: C, CPP, ...,

我正在使用 p-chips从 PrimeNg 显示一些标签。我没有收到任何错误。实际上我什么也没得到，我的网页只是空白。甚至控制台日志也很干净。这是我的代码:

<p-chips [(ngModel)]="tokens">
  <ng-template let-item pTemplate="item">
    {{item | slice:0:15+'...'}}
  </ng-template>
</p-chips>

这是 stackblitz对于相同的。当我删除 +... 时代码有效但后来没有 ...看到的串联(显然)。请指出我的错误。但是，在一个单独的分支中，我从这个问题创建了自己的自定义管道:
How to cut short long strings while rendering using Typescript
这是代码。
EllipsisPipe.component.ts

import { Pipe } from '@angular/core';
import { SlicePipe } from '@angular/common';

@Pipe({
  name: 'ellipsis'
})
export class EllipsisPipe extends SlicePipe {
  constructor () {
    super();
  }
  transform(value: string, maxLength: number): any {
    const suffix = value && value.length > maxLength ? "..." : "";
    return super.transform(value, 0, maxLength) + suffix;
  }
}

它运行良好。您可以看到 stackblitz为此也。但是当我向我的技术负责人展示这个时，她称我为重新发明轮子的白痴。 :-( 她告诉我使用 slice 或任何由 Angular 本身提供的东西。请纠正我的错误。(如果我真的问了一个愚蠢的问题，请原谅我)。
P.S:我得到了一些帮助 - How to truncate text in Angular2?

Answer 1

来自 Angular 文档:它没有提供在字符串末尾添加省略号的选项。所以如果你想添加省略号，我认为你的自定义管道是唯一的解决方案。在我们的项目中，我们也使用与您类似的自定义管道。

以及为什么您的尝试不起作用:

{{item | slice:0:15+'...'}}

它不起作用，因为您传递了无效参数。

https://angular.io/api/common/SlicePipe - 你可以在这里看到它只接受数字，但你正在通过 15... (字符串)。

一个简单的解决方案(仅使用 Angular 的 slice 管道)是:

{{ item | slice:0:15 }}...

或者:

{{ (item | slice:0:15) + '...' }}

但这是硬编码的，所以我建议改用您的自定义管道。