Obtenez le premier mot d'une chaîne en Angulaire en utilisant un tuyau?

Question

J'essaye d'écrire un tuyau qui imprime le first word dans une chaîne. Voici mon code erroné qui imprime de façon indésirable le first letter d'une chaîne.

Par exemple.

PIPE

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

@Pipe({ 
    name: 'firstWord' 
}) 
export class GetFirstWord implements PipeTransform 
{ 
    transform(value: string, args: any[]): string | boolean 
    { 
     if (value === null) {return false;} 
     const firstWords = []; 
     for (let i = 0; i < value.length; i++) 
     { 
      const words = value[i].split(' '); 
      firstWords.push(words[0]); 
     } 
     return firstWords[0]; 
    } 
} 

COMPONENT

userName: string = 'Chuck Norris'; 

TEMPLATE

{{ userName | firstWord }} 

OUTPUT

C

DESIRED OUTPUT

Chuck

Answer 1

Vous n'avez pas besoin d'une boucle

transform(value: string, args: any[]): string | boolean 
    { 
     if (value === null) {return false;} 
     return value.split(' ')[0]; 
    } 

Answer 2

Vous pouvez utiliser cette façon

transform(input:string):string{ 

    return input.split(' ')[0]; 
    } 

LIVE DEMO

Answer 3

C'est parce que votre boucle passe sur les caractères de la chaîne. Vous devriez diviser l'ensemble de l'entrée à la place et obtenir la première occurrence.

@Pipe({ 
    name: 'firstWord' 
}) 
export class GetFirstWord implements PipeTransform 
{ 
    transform(value: string, args: any[]): string | boolean 
    { 
     if (value == null) { 
      return value; 
     } 
     const words = value.split(' '); 
     return words.length > 0 ? words[0] : value; 
    } 
} 

Answer 4

transform(value: string): string | boolean { 
    if (value) { 
     return value.split(' ')[0]; 
    } 
    return false; 
    }