填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫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';
}