拆分并替换 Angular 中的字符串 8 HTML

Question

我正在从 REST api 接收数据。对于 name 参数，我想在 2330 处拆分它并给出新的换行符。示例：我有名字：ABCD 2330 This is My Name 我想为拆分字符串提供不同的样式，屏幕上的输出为：

ABCD 2330
This is My Name // this will be bold

而不是

ABCD 2330 This is My Name

考虑到我对象的复杂性，我想我不能把这个操作放在ts文件中。我像这样绑定数据：<li>{{data.name}}</li> 我可以使用像 split 这样的管道吗？如何在拆分后添加 /n 并重新加入字符串，以及如何在同一个

标签中提供不同的样式？

Answer 1

也许你可以像下面这样尝试

管道

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

@Pipe({name: 'texttransform'})
export class TextTransformPipe implements PipeTransform {
  transform(value: string): string {
    const splitBy = '2330'
    const splittedText = value.split( splitBy );
    return `${ splittedText[0] } ${ splitBy } <br> <b>${ splittedText[1] }</b>`;
  }
}

并在模板文件中

<ul>
  <li *ngFor="let data of receivedData" [innerHTML]="data.name | texttransform"></li>
</ul>

工作stackblitz

Answer 2

嘿，您只需制作自定义管道并在 html 中使用该管道来根据您的要求格式化字符串。

要制作自定义管道，请使用以下代码行：

@Pipe({ name: 'myPipe' })
export class MyPipe implements PipeTransform {

    transform(value: any) {
        if (value) {
           let firstLine= value.substr(0,9);
           let secondLine= value.substr(9).bold();
           
            return firstLine+'/n'+secondLine
        }
        return value;
    }

}

拆分并替换 Angular 中的字符串 8 HTML

Split and Replace string in Angular 8 HTML

html

typescript

angular

angular8