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

Question

Прошу прощения за очень глупый вопрос. Это должно быть очень легко, но я не могу этого сделать. Я создаю минимальную рабочую модель на stackblitz . Итак, у меня есть строковый массив, содержащий некоторую информацию обо мне (скажем). Я хочу отобразить их один за другим, используя ngFor. Но будут некоторые элементы, строки которых очень длинные.

Например: строка:

Яблоко, Мяч, Кошка, Собака, Слон, Fi sh, Коза, Курица, Чернила, Шакал, Кайт

Отображаемый текст должен быть:

Apple, Ball ...

Это означает, что после второй запятой , или может быть после определенных символов скажем, 15 символов, это должно быть ..., потому что исходный текст занимает большую ширину.

Я попробовал следующие методы:

1. слайс (начало, конец)
2. substring (начало, конец)
3. substr (начало, длина)

Но эти методы навсегда обрезают текст. Я не хочу этого Надеюсь, я смог объяснить проблему. Пожалуйста, поправьте меня. Вот стекблиц .

Answer 1

Вы можете получить свою собственную трубу EllipsisPipe из SlicePipe. В приведенном ниже коде производный канал вызывает super.transform для применения slice:0:maxLength и добавляет многоточие, если исходная строка длиннее maxLength. Обратите внимание, что super относится к родительскому классу SlicePipe.

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

. В этом случае трубу можно использовать в шаблоне:

{{ token | ellipsis:15 }}

См. this stackblitz для демонстрации.

Обновление

Если элементы отображаются внутри компонента PrimeNG Chips , вы можете определить собственный шаблон и применить EllipsePipe в шаблоне:

<p-chips [(ngModel)]="values">
  <ng-template let-item pTemplate="item">
    {{item | ellipsis:15}}
  </ng-template>
</p-chips>

См. этот стек для демонстрации.

Answer 2

Два способа усечь текст в angular.

let str = 'How to truncate text in angular';

1. Решение

{{str | slice:0:6}}

Вывод:

how to

Если вы хотите добавить любой текст после строки среза, например

 {{ (str.length>6)? (str | slice:0:6)+'..':(str) }}

Вывод:

how to...

2. Решение (Создать пользовательский канал)

, если вы хотите создать собственный усеченный канал

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

@Pipe({
 name: 'truncate'
})

export class TruncatePipe implements PipeTransform {

transform(value: string, args: string[]): string {
    const limit = args.length > 0 ? parseInt(args[0], 10) : 20;
    const trail = args.length > 1 ? args[1] : '...';
    return value.length > limit ? value.substring(0, limit) + trail : value;
   }
}

В разметке

{{ str | truncate:[20] }} // or 
{{ str | truncate:[20, '...'] }} // or

Не забудьте добавить вход в модуль.

@NgModule({
  declarations: [
    TruncatePipe
  ]
})
export class AppModule {}

Вот стекаблиц Вы можете проверить здесь

---

Другой способ, используя css

---

.b {
  white-space: nowrap; 
  width: 60px;  /* you can do with the help of width  */
  overflow: hidden;
  text-overflow: ellipsis; 
}

<div class="b">Hello world!</div>