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

Posted 2023-03-13

【中文标题】在 Angular 8 HTML 中拆分和替换字符串

【英文标题】：Split and Replace string in Angular 8 HTML

【发布时间】：2020-12-02 05:21:05

【问题描述】：

我正在从 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 文件中。我正在绑定数据，例如：<li>data.name</li> 我可以使用像 split 这样的管道吗？如何在 split 之后添加 /n 并重新加入字符串，以及如何在同一个中给出不同的样式

标签？

【问题讨论】：

对于每个name参数，你只会得到这样的值吗？

是的 ABCD 2330 对所有名称都是通用的

您应该考虑为您的模板编写自定义pipe。 Angular 的文档是很好的资源。 angular.io/guide/…

@joshvito 你能告诉我这是如何工作的吗，我对 Angular 还是很陌生，我已经尝试过阅读文档，但这并没有很大的帮助。如果可能，您能否以更好的方式解释如何解决这个问题？

我尝试了同样的事情，但在我的情况下它没有显示任何内容。它在 stackblitz 中运行良好，但不确定我的屏幕上有什么问题

【参考方案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

【讨论】：

在这段代码中，你能告诉我 HTML 是如何工作的吗？我的意思是我有``` *ngFor = let data of receivedData> data.name ``

我试过给innerHTML，我该怎么做？它给出了错误

我已经创建了管道，但我不确定这将如何在这里工作

name是一个名为receivedData的对象里面的参数，这种情况下HTML应该怎么写？

@Bitly 更新了 html 和 stackblitz，现在可以查看了

【参考方案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;