angular - 使用管道在 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

您可以通过以下方式在 Angular 2+ 中执行此操作，而无需在 HTML 文件（模板插值）中使用任何管道

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

Answer 5

你可以使用这种方式

 transform(input:string):string{

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

现场演示

Answer 6

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