Как соединить строку после использования среза трубы - PullRequest
Новая
       24

Как соединить строку после использования среза трубы

1 голос
/ 05 апреля 2020

Я новичок в Angular. Я хочу обрезать короткие строки длиной более 15 символов (скажем), а затем добавить ... в конце.

Например:

Имя: Tanzeel,

Роль: Стажер

Адрес: Bangal ...,

Любит: C, CPP, ...,

I ' используя p-chips из PrimeNg для отображения некоторых тегов. Я не получаю никакой ошибки. На самом деле я ничего не получаю, моя веб-страница просто пуста. Даже консольный лог тоже чист. Вот мой код: 

<p-chips [(ngModel)]="tokens">
  <ng-template let-item pTemplate="item">
    {{item | slice:0:15+'...'}}
  </ng-template>
</p-chips>

А вот stackblitz для того же самого. Код работает, когда я удаляю +..., но тогда не было видно ... конкатенации (очевидно). Пожалуйста, укажите мою ошибку. Тем не менее, в отдельной ветке я создал свой собственный канал для этого же вопроса:

Как обрезать короткие длинные строки при рендеринге с использованием Typescript

И вот код.

EllipsisPipe.component.ts 

import { Pipe } from '@angular/core';
import { SlicePipe } from '@angular/common';

@Pipe({
  name: 'ellipsis'
})
export class EllipsisPipe extends SlicePipe {
  constructor () {
    super();
  }
  transform(value: string, maxLength: number): any {
    const suffix = value && value.length > maxLength ? "..." : "";
    return super.transform(value, 0, maxLength) + suffix;
  }
}

И работает отлично. Вы также можете увидеть stackblitz для этого. Но когда я показал это своему техническому руководителю, Она назвала меня идиотом за изобретение колеса. :-( Она сказала мне использовать slice или что-то, что предоставляется самим Angular. Пожалуйста, исправьте мою ошибку. (Прошу прощения, если я действительно задаю глупый вопрос).

PS: Я получил некоторую помощь от этого - Как обрезать текст в Angular2?

1 Ответ

1 голос
/ 05 апреля 2020

Из Angular документации: она не предоставляет возможность добавить многоточие в конце строки. Так что, если вы хотите добавить многоточие, я думаю, что ваш пользовательский канал - единственное решение. В нашем проекте мы также используем пользовательский канал, похожий на ваш.

И почему ваша попытка не работает: 

{{item | slice:0:15+'...'}}

Она не работает, потому что вы передаете недопустимый параметр.

https://angular.io/api/common/SlicePipe - здесь видно, что он принимает только цифры, но вы передаете 15... (строка).

Простое решение (с использованием только Angular) slice труба) будет: 

{{ item | slice:0:15 }}...

Или: 

{{ (item | slice:0:15) + '...' }}

Но это жестко запрограммировано, поэтому я предлагаю вместо этого использовать пользовательскую трубу.

...