javascript - 管道放置下划线底部字母角度

Question

我想得到第一个字母并在底部加上下划线。获取第一个字母和转换的代码

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

显示不正确：

标签： javascriptangulartypescript

Answer 1

在 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