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

Question

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

例如：

姓名：坦泽尔,

角色：实习生

地址: 孟加拉...,

喜欢：C、CPP、...、

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

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

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

如何在使用 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 。但当我向我的技术主管展示这个时，她称我为重新发明轮子的白痴。:-( 她告诉我使用sliceAngular 本身提供的任何东西。请纠正我的错误。（如果我真的问了一个愚蠢的问题，请原谅我）。

PS：我从中得到了一些帮助 - 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) + '...' }}

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