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

Question

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

例如：

Name: Tanzeel,

Role: Intern

Address: Bangal...,

Likes: C, CPP, ...,

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

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

这是相同的 stackblitz。当我删除 +... 但随后没有看到 ... 连接时，代码有效（很明显）。请指出我的错误。但是，在一个单独的分支中，我根据这个问题创建了自己的自定义管道：

这是代码。

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) + '...' }}

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

Answer 2

我遇到了类似的问题，不想向我的项目添加自定义管道。该主题已有 1 年多的历史，但也许它可以帮助其他遇到同样问题的人。我对此的解决方案是经典的 if/else。效果不错。

{{(project?.description.length>200) ? (project?.description | slice:0:200)+'...' : (project?.description)}}

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

How to concat a string after using slice pipe

angular

typescript

angular-pipe