SlicePipe

Stable Pipe

Что он делает

Создаёт новый список или строку, содержащую подмножество (срез) элементов.

Как использовать

array_or_string_expression | slice:start[:end]

NgModule

Описание

Где входное выражение является List или String, и:

• start: Начальный индекс подмножества, которое нужно вернуть.
  • положительное целое число: вернуть элемент с индексом start и все элементы после него в списке или строковом выражении.
  • отрицательное целое число: вернуть элемент с индексом start с конца и все элементы после него в списке или строковом выражении.
  • если положительное и больше размера выражения: вернуть пустой список или строку.
  • если отрицательное и больше размера выражения: вернуть весь список или строку.
• end: Конечный индекс подмножества, которое нужно вернуть.
  • пропущено: вернуть все элементы до конца.
  • если положительное: вернуть все элементы перед индексом end списка или строки.
  • если отрицательное: вернуть все элементы перед индексом end с конца списка или строки.

Все поведение основано на ожидаемом поведении JavaScript API Array.prototype.slice() и String.prototype.slice().

При работе со списком возвращаемый список всегда является копией, даже когда возвращаются все элементы.

При работе с пустым значением, труба возвращает пустое значение.

Пример со списком

Этот ngFor пример:

@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'];
}

производит следующее:

<li>b</li>
<li>c</li>

Примеры со строками

@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';
}

экспортировано из @angular/common/index определено в @angular/common/src/pipes/slice_pipe.ts