Есть ли альтернатива для "limitTo" в Angular2 или плюс

Question

Как и в Angularjs (Angular-1), существует фильтр limitTo для ограничения текста, который вы должны отображать

Пример: если у меня есть строка типа

$scope.val = "hey there how are you";

и мне нужно отображать только ограниченный текст на стороне HTML, поэтому я использовал

{{val | limiteTo:10}}

Таким образом, он отображает только 10 символов из строки, такой как: * Привет

Я перешел на Angualr2, и я не знаю, как это можно сделать здесь, я использовал тот же фильтр, но он не будет работать

Answer 1

В Angular 4 есть труба среза, которую вы можете использовать, а также ниже приведен фрагмент кода от tutorialspoint.com и ниже, к которому я также прикрепил ссылку.

<div style="width:40%;float:left;border:solid 1px black;">
  <h1>Json Pipe</h1>
  <b>{{ jsonval | json }}</b>
  <h1>Percent Pipe</h1>
  <b>{{00.54565 | percent}}</b>
  <h1>Slice Pipe</h1>
  <b>{{months | slice:2:6}}</b> // here 2 and 6 refers to the start and the end index
</div>

Угловые 4 трубы

Встроенные трубы Угловые

Answer 2

Использовать SlicePipe

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

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

Или еще Создать пользовательскую трубу

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'slice'
})
export class SlicePipe implements PipeTransform {
  transform(value: any, start?: any, end?: any): any {
    if (start == null && end == null) {
      return value;
    }
    else {
      return value.slice(start, end);
    }
  }

}

Пример: https://stackblitz.com/edit/angular-uv5gvs

Ссылка: https://angular.io/api/common/SlicePipe