SlicePipe — Angular | Spec-Zone.ru

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

Использование канала

{{ value_expression | slice:start:end }}

API

class SlicePipe implements PipeTransform {
  transform<T>(value: readonly T[], start: number, end?: number | undefined): T[];
  transform(value: null | undefined, start: number, end?: number | undefined): null;
  transform<T>(value: readonly T[] | null | undefined, start: number, end?: number | undefined): T[] | null;
  transform(value: string, start: number, end?: number | undefined): string;
  transform(value: string | null | undefined, start: number, end?: number | undefined): string | null;
}

transform

5 перегрузок

@paramvaluereadonly T[]

список или строка, которую нужно обрезать.

@paramstartnumber

начальный индекс возвращаемого подмножества:

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

@paramendnumber | undefined

конечный индекс возвращаемого подмножества:

не указан: возвращает все элементы до конца.
если положительный: возвращает все элементы до индекса end списка или строки.
если отрицательный: возвращает все элементы до индекса end от конца списка или строки.

@returnsT[]

@paramvaluenull | undefined

@paramstartnumber

@paramendnumber | undefined

@returnsnull

@paramvaluereadonly T[] | null | undefined

@paramstartnumber

@paramendnumber | undefined

@returnsT[] | null

@paramvaluestring

@paramstartnumber

@paramendnumber | undefined

@returnsstring

@paramvaluestring | null | undefined

@paramstartnumber

@paramendnumber | undefined

@returnsstring | null

Описание

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

Экспортировано из

CommonModule

Примечания по использованию

Поведение полностью соответствует ожидаемому поведению методов JavaScript API Array.prototype.slice() и String.prototype.slice().

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

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

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

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

@Component({
  selector: 'slice-list-pipe',
  imports: [SlicePipe],
  template: `<ul>
    @for (i of collection | slice: 1 : 3; track $index) {
      <li>{{ i }}</li>
    }
  </ul>`,
})
export class SlicePipeListComponent {
  collection: string[] = ['a', 'b', 'c', 'd'];
}

создаёт следующий результат:

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

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

@Component({
  selector: 'slice-string-pipe',
  imports: [SlicePipe],
  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';
}