SlicePipe
从一个 Array 或 String 中创建其元素一个新子集(slice)。
Creates a new Array or String containing a subset (slice) of the elements.
{{ value_expression | slice : start [ : end ] }}
Exported from
输入值
value | string | ReadonlyArray |
参数
start | number | |
end | number | 可选. 默认值是 `undefined`. |
使用说明
所有行为都基于 JavaScript API Array.prototype.slice() 和 String.prototype.slice() 的预期行为。
All behavior is based on the expected behavior of the JavaScript API Array.prototype.slice() and String.prototype.slice().
当操作 Array 时,返回的 Array 始终是一个副本 —— 即使返回了所有元素也是一样。
When operating on an Array, the returned Array is always a copy even when all the elements are being returned.
当操作空白值时,该管道也会返回空白值。
When operating on a blank value, the pipe returns the blank value.
列表范例
List Example
ngFor 例子:
This ngFor example:
@Component({
selector: 'slice-list-pipe',
template: `<ul>
<li *ngFor="let i of collection | slice:1:3">{{i}}</li>
</ul>`
})
export class SlicePipeListComponent {
collection: string[] = ['a', 'b', 'c', 'd'];
}
生成下列内容:
produces the following:
<li>b</li>
<li>c</li>
字符串范例
String Examples
@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';
}