Appliquer dynamiquement le filtre/tube de formatage en * ngFor en Angulaire (Angulaire 2/4)?

Question

Ceci est mon objet de données dans le composant

testData=[ 
    { 
    "value": "test value with null formatter", 
    "formatter": null, 
    }, 
    { 
    "value": "1234.5678", 
    "formatter": "number:'3.5-5'", 
    }, 
    { 
    "value": "1.3495", 
    "formatter": "currency:'USD':true:'4.2-2'", 
    } 
] 

HTML

<div *ngFor="let data of testData">{{data.value | data.formatter}}</div> 

je dois afficher un tableau de données avec chaque ligne de format différent. J'utilise tapuscrit/angulaire4.

Answer 1

Une option consiste à créer un tube personnalisé. Vous pouvez ensuite passer votre chaîne de formatage dans votre tube personnalisé. Votre tube personnalisé analyserait la chaîne de formatage transmise et effectuerait la mise en forme appropriée.

Cela semble-t-il fonctionner?

Answer 2

Vous devez créer des tuyaux. échantillon

(Pour remplacer par N?):

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({name: 'nnn'}) 
export class NReplacePipe implements PipeTransform { 
    transform(value: string): string { 
    // write your custom logic here 
    let newValue = value.replace(/\?/g, 'N'); 
    return `${newValue}`; 
    } 
} 

puis l'utiliser dans votre code html

<p>varName | nnn </p> 

Cela transformerait votre sortie.