SlicePipe

pipe 非纯管道

从一个 Array 或 String 中创建其元素一个新子集（slice）。

Creates a new Array or String containing a subset (slice) of the elements.

      
      {{ value_expression | slice : start [ : end ] }}

NgModule

CommonModule
```
      
      CommonModule
    
```

输入值

value

any

要截取的列表或字符串。

a list or a string to be sliced.

参数

start

number

要返回的子集的初始索引：

the starting index of the subset to return:

一个正整数：从列表或字符串表达式中返回从 start 索引处及之后的所有条目。
a positive integer: return the item at start index and all items after in the list or string expression.
一个负整数：从列表或字符串表达式中返回从结尾开始的第 start 索引处及之后的所有条目。
a negative integer: return the item at start index from the end and all items after in the list or string expression.
如果是正数而且大于表达式的条目数：返回空列表或空字符串。
if positive and greater than the size of the expression: return an empty list or string.
如果是复数而且大于表达式的条目数：返回整个列表或字符串。
if negative and greater than the size of the expression: return entire list or string.

end

number

所要返回的子集的结尾索引：

the ending index of the subset to return:

省略：返回结尾之前的全部条目。
omitted: return all items until the end.
如果为正数：从列表或字符串中返回 end 索引之前的所有条目。
if positive: return all items before end index of the list or string.
如果为负数：从列表或字符串中返回 end 索引之前的所有条目。
if negative: return all items before end index from the end of the list or string.

可选. 默认值是 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';
}

NgModulelink

输入值link

参数link

使用说明link

列表范例link

List Examplelink

字符串范例link

String Exampleslink