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

【问题标题】：How to concat a string after using slice pipe使用切片管道后如何连接字符串
【发布时间】：2020-07-17 08:08:44
【问题描述】：

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

例如：

姓名：坦泽尔，

角色：实习生

地址：Bangal...，

喜欢：C、CPP、...、

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

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

【问题讨论】：

EllipsisPipe 的代码来自this answer（应该在问题中提及，但给出了其他参考）。你可以告诉你的技术主管，这个解决方案实际上是在使用SlicePipe。我会说她的评论没有给我留下深刻的印象......
是的，没错。我以为我已经粘贴了代码，所以不需要参考。感谢您纠正我，所以我也添加了链接。 :-)

标签： angular typescript angular-pipe

【解决方案1】：

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

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

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

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

https://angular.io/api/common/SlicePipe - 您可以在此处看到它只接受数字，但您传递的是 15...（字符串）。

一个简单的解决方案（仅使用 Angular 的 slice 管道）是：

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

或者：

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

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

【讨论】：

这行得通。让我快速运行单元测试用例。请给我 2 分钟。
是的，这个解决方案很完美，你也解释得很好。我会坚持{{ (item | slice:0:15) + '...' }} 一段时间。那我们来看看我的代码审查员怎么说。
祝你好运 :) 如果 Tech Lead 找到更好的东西，也请告诉我。 ;) 就目前而言，我认为您的方法/解决方案可能是最好的。

【解决方案2】：

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

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

【讨论】：