html - HTML中字符串插值的样式设置-Angular

假设模板以一种方式从组件接收字符串绑定，插值：

<span>{{list.members}}</span>

它呈现出
5名成员
如何在HTML上编辑字符串而不更改组件上的任何内容，以便使粗体数字5和“成员”保持不变：
5名成员

最佳答案

以下是管道解决方案：
强编号.pipe.ts：

@Pipe({name: 'strongifyNumber'})

export class StrongifyNumber implements PipeTransform {
  transform(value: string): string {
    let values: string[] = value.split(' ')
    if(values.length == 2){
        return ' <b>'+values[0]+'</b> ' + values[1];
    }
    return value;
  }
}

应用模块：

import { StrongifyNumber } from './strong-number.pipe';
@NgModule({
  declarations: [
    AppComponent, StrongifyNumber
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [StrongifyNumber],
  bootstrap: [AppComponent]
})

模板：

<span [innerHTML]="list.members | strongifyNumber"></span>