填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

SlicePipe

从一个 ArrayString 中创建其元素一个新子集(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';
}