使用管道获取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 {
  if (!value) { return ''; }
  return value.split(' ')[0];
}

Answer 2

这是因为您的for循环在字符串的字符上进行。您应该拆分整个输入并获得第一个匹配项。

@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 3

对于类似的查询，userName：string =''Chuck Norris';第一个单词前的多余空格

export class firstWord implements PipeTransform{

transform(value: string): string {
   if (!value) { return value; }
   value=value.trim();      
   return value.split(' ')[0];
 }

Answer 4

您可以使用这种方式

 transform(input:string):string{

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

LIVE DEMO

Answer 5

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

Answer 6

您可以按以下方式在角度2+中完成此操作，而无需在HTML文件中进行任何管道处理（模板插值）

{{ object_or_paragraph.split(' ')[0]  }}