パイプを使用して文字列の最初の単語をAngularで取得しますか？

Question

first wordを文字列に出力するパイプを作成しようとしています。以下は、間違って文字列のfirst letterを印刷する誤ったコードです。

たとえば、

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

チャック

Answer 1

あなたはループを必要としない

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

Answer 2

あなたは、あなたのためのループは、文字列の文字の上に行くためだこのよう

transform(input:string):string{ 

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

LIVE DEMO

Answer 3

を使用することができます。代わりに入力全体を分割し、最初のオカレンスを取得する必要があります。

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