如何在 Angular 版本 6 中按单词而不是按字符截断答案

【问题标题】：How to truncate by words not by character in Angular release 6如何在 Angular 版本 6 中按单词而不是按字符截断
【发布时间】：2018-06-01 18:27:38
【问题描述】：

我正在处理 Angular 中的截断管道，我的代码可以将文本截断指定长度的 35 个单词，但它目前正在截断为 35 个字符....

html：

 <p *ngIf="item.description.length > 0"><span class="body-12-bold">Description: </span><span>{{ description | truncate:[35] }}</span></p>

转换管道：

    @Pipe({name: 'truncate'})
    export class TruncatePipe implements PipeTransform {
        constructor(private item: SearchEntry, private config: ConfigService) { }
        transform(value: string, args: string[]): string {
            const limit = args.length > 0 ? parseInt(args[0], 10) : 20;
            const trail = args.length > 1 ? args[1] : '...';
            return value.length > limit ? value.substring(0, limit) + trail : value;
        }
    }

【问题讨论】：

欢迎来到 SO！您能否将代码示例缩减到尽可能小的大小以演示您遇到的问题？删除方法和其他功能以突出显示您遇到的问题。
为什么要让组件类成为一个组件和两个管道？您链接的问题当然不推荐这样的东西。难怪这不能按预期工作。只需将它们设为不同的类即可。
@mlapaglia 完成了。
@estus 因为我需要两个不同的管道。
你需要有 3 个不同的类。 1 为一个组件。 2 用于管道。

标签： angular typescript

【解决方案1】：

transform(value: string, limit: number, trail: String = '…'): string {
    let result = value || '';
        if (value) {
    const words = value.split(/\s+/);
    if (words.length > Math.abs(limit)) {
        if (limit < 0) {
        limit *= -1;
        result = trail + words.slice(words.length - limit, words.length).join(' ');
        } else {
        result = words.slice(0, limit).join(' ') + trail;
        }
    }
    }
    return result;
}

【讨论】：

【解决方案2】：

如果您需要如下图所示的输出，如果您得到如下图所示的输出，

请使用以下代码：

    <div class="tab-pane" id="pending_line_layer" role="tabpanel">
     <table class="db table">
      <thead>
       <tr>
        <th>name</th>
        <th>category</th>
        <th>data</th>
        <th>Action</th>
       </tr>
      </thead>

      <tbody>
       <tr *ngFor="let obj of pending_line">
        <td>{{obj.name}}</td>
        <td>{{obj.category}}</td>
        <td>{{obj.data | slice : 0 : 21}} ... {{obj.data | slice:obj.data.length - 21 : obj.data.length}}</td>
       </tr>
      </tbody>
     </table>
    </div>

请不要说我的 Angular 版本是 v7.3.9。有关更多详细信息，请查看下图：

【讨论】：

图片毫无意义
图像已更新，突出显示更改
您确定 OP 或任何人都可以拥有与您相同的用例吗？这个答案没有任何价值