使用slice pipe (angular的核心管道)非常简单，就像你要求data.title一样:

{{ data.title | slice:0:20 }}

来自Angular通用文档https://angular.io/api/common/SlicePipe

使用slice pipe (angular的核心管道)非常简单，就像你要求data.title一样:

{{ data.title | slice:0:20 }}

来自Angular通用文档https://angular.io/api/common/SlicePipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate',
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number, trail = '...'): string {
    if (value.length <= limit) {
      return value;
    }

    return value.substring(0, limit - trail.length).replace(/\s+$/, '') + trail;
  }
}

{{ str | truncate: 20 }}
{{ str | truncate: 20:'>>>'] }}

如果需要用单词截断:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncateByWords',
})
export class TruncateByWordsPipe implements PipeTransform {
  transform(value: string, limit: number, trail = '...'): string {
    if (value.length <= limit) {
      return value;
    }

    const substr = value.substring(0, limit - trail.length).split(' ');
    const isLastWordFull = value
      .split(' ')
      .find(w => w === substr[substr.length - 1]);

    if (isLastWordFull) {
      return substr.join(' ') + trail;
    }

    return substr.slice(0, -1).join(' ') + trail;
  }
}

{{ str | truncateByWords: 20 }}
{{ str | truncateByWords: 20:'>>>'] }}

用可选参数截断管道:

Limit - string最大长度 completeWords -标记在最近的完整单词处截断，而不是字符 省略号——附加在后面的后缀

-

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 25, completeWords = false, ellipsis = '...') {
    if (completeWords) {
      limit = value.substr(0, limit).lastIndexOf(' ');
    }
    return value.length > limit ? value.substr(0, limit) + ellipsis : value;
  }
}

不要忘记添加一个模块条目。

@NgModule({
  declarations: [
    TruncatePipe
  ]
})
export class AppModule {}

使用

示例字符串:

public longStr = 'A really long string that needs to be truncated';

标记:

  <h1>{{longStr | truncate }}</h1> 
  <!-- Outputs: A really long string that... -->

  <h1>{{longStr | truncate : 12 }}</h1> 
  <!-- Outputs: A really lon... -->

  <h1>{{longStr | truncate : 12 : true }}</h1> 
  <!-- Outputs: A really... -->

  <h1>{{longStr | truncate : 12 : false : '***' }}</h1> 
  <!-- Outputs: A really lon*** -->

刚刚尝试了@蒂莫西佩雷斯的回答，并添加了一行

if (value.length < limit)
   return `${value.substr(0, limit)}`;

to

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 25, completeWords = false, ellipsis = '...') {

   if (value.length < limit)
   return `${value.substr(0, limit)}`;

   if (completeWords) {
     limit = value.substr(0, limit).lastIndexOf(' ');
   }
   return `${value.substr(0, limit)}${ellipsis}`;
}
}

是这样的:

{{ data.title | slice:0:20 }}

如果你想要省略号，这里有一个变通方法

{{ data.title | slice:0:20 }}...