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

【问题标题】：Split and Replace string in Angular 8 HTML在 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 中运行良好，但不确定我的屏幕上有什么问题

标签： html angular typescript angular8

【解决方案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，现在可以查看了