Труба для подчеркивания нижняя буква угловая

Я хочу получить первую букву и поставить нижнее подчеркивание. код для получения первой буквы и преобразования

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

@Pipe({
  name: 'underlinePrimeiraLetra'
})
export class underlinePrimeiraLetraPipe implements PipeTransform {
  transform(value: string, args: any[]): string {
    if (value === null) return;
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

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

если я сделаю это

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

@Pipe({
  name: 'underlinePrimeiraLetra'
})
export class underlinePrimeiraLetraPipe implements PipeTransform {
  transform(value: string, args: any[]): string {
    if (value === null) return;
    return "<u>" + value.charAt(0).toUpperCase() + "</u>" + value.slice(1);
  }
}

не показывать правильно:

enter image description here

Вы имеете в виду, как подчеркнуть первый символ? Как тег <u>?

Martin Adámek 10.08.2018 14:54

да, но я пытаюсь это сделать, но не получается ... let value2 = <u>${value.charAt(0)}</u> return value2 + value.slice (1);

Davi Resio 10.08.2018 15:01
0
2
413
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

В HTML

<p *ngFor="let name of names" [innerHTML]="name | underlinePrimeiraLetra"></p>

В файле трубы

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

@Pipe({
  name: 'underlinePrimeiraLetra'
})
export class underlinePrimeiraLetraPipe implements PipeTransform {
  transform(value: string, args: any[]): string {
    if (value === null) return;
    return "<u>" + value.charAt(0).toUpperCase() + "</u>" + value.slice(1);
  }
}

Проверьте Stackblitz

Обновлять:

Даже этот answer is being a little bit wrong and too complicated for the need, как сказал @trichetriche, я хочу, чтобы интересные люди узнали о том, как санировать HTML

Ниже один - очищенный код

import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'underlinePrimeiraLetra'
})
export class underlinePrimeiraLetraPipe implements PipeTransform {

  constructor(private _sanitizer: DomSanitizer) {}

  transform(value: string, args: any[]): string {
    if (value === null) return;
    return this._sanitizer.sanitize(SecurityContext.HTML, "<u>" + value.charAt(0).toUpperCase() + "</u>" + value.slice(1));
  }
}

Я также обновил Stackblitz

Нет необходимости в Angular.

user4676340 10.08.2018 15:03

Не нужны средства Angular?

Sivakumar Tadisetti 10.08.2018 15:03

Что вы можете сделать это очень просто с помощью CSS.

user4676340 10.08.2018 15:03

В чем проблема с приведенным выше кодом? Вы опускаете все ответы !!!

Sivakumar Tadisetti 10.08.2018 15:04

Да, потому что код Angular не требуется. Я не вижу смысла изменять внутренний HTML-код некоторого контента, чтобы подчеркнуть одну букву. Кроме того, вам нужно будет очистить вашу строку перед ее рендерингом. Я бы дважды проголосовал против, но не могу.

user4676340 10.08.2018 15:05

как я могу это сделать с помощью css?

Davi Resio 10.08.2018 15:06

@DaviResio Я опубликовал ответ по этому поводу.

user4676340 10.08.2018 15:08

@DaviResio вы пробовали решение тричетриша?

Sivakumar Tadisetti 10.08.2018 15:08

@ JavascriptLover-SKT (кстати, я не голосую вниз из-за удовольствия, я тоже теряю очки при голосовании против. Я делаю это, потому что ответы, за которые проголосовали, будут первыми. Ваш ответ немного неправильный и слишком сложный для необходимости, например другие, должны быть ниже других лучших ответов).

user4676340 10.08.2018 15:10

Теперь, когда вы добавили дезинфицирующую часть, мне не нужно отрицательное голосование, потому что оно отвечает на вопрос (но я также не даю положительного голоса, потому что это не лучшее решение)

user4676340 10.08.2018 15:49

@trichetriche да, это правильно, но хочу, чтобы другие javascript / angular lovers знали о дезинфекции HTML. И ваш ответ супер хороший и простой: -;

Sivakumar Tadisetti 10.08.2018 15:55
Ответ принят как подходящий

Вы можете сделать это только с помощью CSS, с помощью селектора ::first-letter:

p::first-letter {
  text-transform: capitalize;
  text-decoration: underline;
}
<p>underline & capitalize my first letter !</p>

Имейте приличие комментировать, когда вы голосуете против, пожалуйста.

user4676340 10.08.2018 15:04

я удалил ответ !!

Chellappan வ 10.08.2018 15:10

@Chellappan, ты мог бы оставить его, я голосую только против, чтобы отсортировать ответы

user4676340 10.08.2018 15:11

Другие вопросы по теме