使用管道获取 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

Chuck

Answer 1

你不需要循环

transform(value: string, args: any[]): string {
  if (!value) { return ''; }
  return value.split(' ')[0];
}

Answer 2

你可以这样使用

 transform(input:string):string{

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

LIVE DEMO

Answer 3

那是因为你的 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 4

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

Answer 5

回答类似
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 6

您可以在 angular 2+ 中通过以下方式在 HTML 文件（模板插值）中没有任何管道的情况下执行此操作

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

使用管道获取 Angular 中字符串的第一个单词？

Get the first word of a string in Angular using a Pipe?

angular-pipe

angular