Question

与Angularjs（Angular-1）一样，有一个 limitTo过滤器以限制您必须显示的文本

例如：如果我有一个类似

的字符串

$scope.val = "hey there how are you";

并且我只必须在HTML端显示有限的文本，所以我使用了

{{val | limiteTo:10}}

因此，它从诸如:: 嘿

之类的字符串中仅显示10个字符

我已经在Angualr2上移动了，我不知道该怎么办，我使用了相同的过滤器，但是它不起作用

Answer 1

使用SlicePipe

创建一个新的数组或字符串，其中包含以下内容的子集（切片）元素。

@Component({
  selector: 'slice-string-pipe',
  template: `<div>
    <p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p>
    <p>{{str}}[4:0]: '{{str | slice:4:0}}' - output is expected to be ''</p>
    <p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p>
    <p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p>
    <p>{{str}}[-100]: '{{str | slice:-100}}' - output is expected to be 'abcdefghij'</p>
    <p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p>
  </div>`
})
export class SlicePipeStringComponent {
  str: string = 'abcdefghij';
}

或者其他创建自定义管道

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

@Pipe({
  name: 'slice'
})
export class SlicePipe implements PipeTransform {
  transform(value: any, start?: any, end?: any): any {
    if (start == null && end == null) {
      return value;
    }
    else {
      return value.slice(start, end);
    }
  }

}

示例：https://stackblitz.com/edit/angular-uv5gvs

参考：https://angular.io/api/common/SlicePipe

Answer 2

Angular 4中有切片管道，您可以使用它，下面是 tutorialspoint.com 的代码片段，下面我也附加了同样的链接。

<div style="width:40%;float:left;border:solid 1px black;">
  <h1>Json Pipe</h1>
  <b>{{ jsonval | json }}</b>
  <h1>Percent Pipe</h1>
  <b>{{00.54565 | percent}}</b>
  <h1>Slice Pipe</h1>
  <b>{{months | slice:2:6}}</b> // here 2 and 6 refers to the start and the end index
</div>

Angular 4 pipes

Built in pipes Angular

Angular2或其他版本中是否有“ limitTo”的替代方案？

2 个答案: