在 Angular2 或 plus 中是否有任何替代"limitTo"

Question

就像在Angularjs(Angular-1(中一样，有一个限制过滤器来限制你必须显示的文本

例如：如果我有一个类似

$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

Ref：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>

角 4 管

内置管道 角度