typescript 在Angular 8 HTML中拆分和替换字符串

z31licg0  于 2022-12-30  发布在  TypeScript
关注(0)|答案(3)|浏览(143)

我正在从REST API接收数据。对于名称参数,我想在2330处拆分它并提供新的换行符。示例:我有名字:ABCD 2330 This is My Name我想给拆分的字符串赋予不同的风格,屏幕上的输出为:

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

而不是

ABCD 2330 This is My Name

考虑到对象的复杂性,我认为我不能将此操作放在ts文件中,我将像这样绑定数据:我能不能使用一些管道,比如split,我如何在split后添加/n并重新连接字符串,我如何在相同的字符串中给出不同的样式
1.标签?

wfveoks0

wfveoks01#

也许你可以尝试像下面

管道

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

siv3szwd

siv3szwd2#

嘿,你只需要定制管道,并在你的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;
    }

}
kuhbmx9i

kuhbmx9i3#

对于简单的用例,可能不需要添加管道。
我做了以下工作
英寸

myName;

// data received
handleData(data) {
  var originalName = data.name;
  this.myName = originalName.split("name")[0]
}

在.html中

{{myName}}

相关问题