SlicePipe
从一个 Array
或 String
中创建其元素一个新子集(slice)。
Creates a new Array
or String
containing a subset (slice) of the elements.
{{ value_expression | slice : start [ : end ] }}
NgModule
输入值
value | any |
参数
start | number | |
end | number | 可选. 默认值是 |
使用说明
所有行为都基于 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';
}