Del og erstatt streng i Angular 8 HTML

Jeg mottar data fra REST API. For navneparameteren vil jeg dele den ved 2330 og gi linjeskift. Eksempel: Jeg har navn: ABCD 2330 Dette er mitt navn Jeg vil gi forskjellig stil til de delte strengene, og utdataene på skjermen min skal være:

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

og ikke

ABCD 2330 This is My Name

  • tagg?

    • Gitt kompleksiteten til objektet mitt, tror jeg ikke jeg kan legge denne operasjonen i ts-filen. Jeg binder dataene slik: <li>{{data.name}}</li> kan jeg bruke en pipe som split, og hvordan ville jeg lagt til /n etter splitten og slått sammen strengen igjen, og hvordan kan jeg også gi forskjellig stil i den samme

    Svar #1

    Kanskje du kan prøve slik som nedenfor

    Rør

    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>`;
  }
}

    Og i malfilen

    <ul>
  <li *ngFor="let data of receivedData" [innerHTML]="data.name | texttransform"></li>
</ul>

    Arbeider stackblitz

    Svar #2

    For en enkel brukstilfelle kan det hende det ikke er nødvendig å legge til et rør.

    Jeg har gjort følgende

    I .ts

    myName;

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

    I .html

    {{myName}}

    Relaterte artikler