Javascript 使用ngClass函数将样式应用于字符串

我正在尝试编写一个函数，在

[ngClass]

中使用，将CSS类应用于较大字符串中的某些字符。从第三方API返回的

假设返回的数据如下所示：

data = [
 { name: 'Johnny', description: "Johnny ate an apple."},
 { name: "Bobby", description: "Bobby hates apples."}
]

.text-italics {
  text-transform: italics !important;
}

我的HTML将遍历数据数组中的所有对象，并将它们打印到UI。但是，我需要搜索每个对象上的每个描述属性，找出是否存在精确匹配，并将样式应用于该单词

因此，我需要逐个字符比较两个字符串

假设类是“

文本斜体”

”。在哪种情况下，CSS将如下所示：

data = [
 { name: 'Johnny', description: "Johnny ate an apple."},
 { name: "Bobby", description: "Bobby hates apples."}
]

.text-italics {
  text-transform: italics !important;
}

我的字符串是“Johnny吃了一个苹果”，来自对象1的description属性

但我只想要“苹果”斜体字。不是“ate”中的“a”或“an”中的“a”

物体二也一样。“苹果”中的“苹果”应该是斜体。不是“恨”中的“a”

---

为此，您不需要有两个单独的函数，只需包含管道中的所有内容：

@Pipe({
  name: 'wrapItalic'
})
export class WrapItalic {
  transform(content, word) {
    const splits = content.split(' ');
    let result = '';
    splits.forEach(next => {
        word === next ? result += ` <i>${next}</i> ` : result += ` ${next}`;
    });
    return result.trim();
  }
}

@管道({
名称：“wrapItalic”
})
出口级包装{
转换（内容、单词）{
常量拆分=内容拆分（“”）；
让结果=“”；
splits.forEach（下一步=>{
word===next？result+=`${next}`:result+=`${next}`；
});
返回result.trim（）；
}
}

以及您的HTML：

  Test <span [outerHTML]="'Jonny ate an Apple' | wrapItalic: 'Apple'"></span>

测试

---

如果您想根据作为完整搜索项一部分的字符设置字符样式，则可能比需要在描述中传递字符索引更快，因为您只需执行一次工作（循环）

，例如

let char of outerItem.description | splitString；设i=指数

并使用一些算法检查字符是否是搜索词的一部分。因为我们正在规范化为大写，所以我使用小写字母“a”来表示

    //our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

 import { splitStringPipe }          from './split-string.pipe';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <dl>
      <dt>Term</dt>
      <dd><input [(ngModel)]="b" /></dd>
      </dl>

      <ng-container *ngFor="let outerItem of data">
    <ng-container *ngFor="let char of outerItem.description | splitString; let i = index;">
      <span [ngClass]="{'text-italics' : applyItalics(outerItem.description, i, b)}">
        {{char}}
      </span>
    </ng-container>
    </ng-container>
    </div>
  `,
})
export class App {
  data: object[];
  b: string;
  constructor() {
    this.b = "term";
    this.data = [
      { name: 'Johnny', description: "Johnny ate an apple."},
      { name: "Bobby", description: "Bobby hates apples."}
    ];
  };

  applyItalics(desc,i,b) {

     if (desc) {
      let normalDesc = desc.toUpperCase();
      let normalTerm = b.toUpperCase();
      let tTerm = normalDesc.replace(normalTerm,Array(normalTerm.length+1).join("a"));
      return tTerm[i] === 'a';
     }
     return false;
  }
}

@NgModule({
  imports: [BrowserModule, FormsModule],
  exports: [splitStringPipe],
  declarations: [splitStringPipe,App],
  bootstrap: [App],
})
export class AppModule {}

//我们的根应用程序组件
从'@angular/core'导入{Component，NgModule，VERSION}；
从“@angular/platform browser”导入{BrowserModule}；
从'@angular/forms'导入{FormsModule}；
从“./split string.pipe”导入{splitStringPipe}；
@组成部分({
选择器：“我的应用程序”，
模板：`
学期
{{char}}
`,
})
导出类应用程序{
数据：对象[]；
b:弦；
构造函数（）{
此.b=“术语”；
此参数。数据=[
{名字：'Johnny'，描述：'Johnny吃了一个苹果。}，
{名称：“博比”，描述：“博比讨厌苹果。”}
];
};
应用程序（描述，i，b）{
如果（描述）{
设normalDesc=desc.toUpperCase（）；
设normalTerm=b.toUpperCase（）；
让tTerm=normalDesc.replace（normalTerm，数组（normalTerm.length+1.join）（“a”）；
返回tTerm[i]=“a”；
}
返回false；
}
}
@NGD模块({
导入：[BrowserModule，FormsModule]，
导出：[splitStringPipe]，
声明：[splitStringPipe，应用程序]，
引导：[应用程序]，
})
导出类AppModule{}

---

下面是Plunker上的完整示例

您缺少结尾“}”=>

[ngClass]=“{'text-teal'：applyItalics（termToCheck）}”

是的，但该代码只是一个示例。这是行不通的，因为当我只想将“apple”样式化时，它会将样式应用于“ate”中的“a”。您可以在组件中创建html内容，然后在模板上呈现该内容？此外，字符串是动态的还是始终相同？它是动态的。内容实际上是从值的API返回的数组。我需要在数组中的每个对象上循环一个特定的属性，它们都有这个字符串属性的不同内容，并检查是否有匹配项。这很容易实现，我甚至没有考虑自定义管道。谢谢