Question

我在应用程序中定义了一个管道示例，该示例将大写字符串转换为小写形式，例如：'Activities'=>'activities '。数据为Array格式，我正在*ngFor上应用此过滤器。它返回一个错误消息，提示“ toLowerString不是函数”，请帮助我了解我要去哪里。

Demo link

Answer 1

您不能使用value.toLowerCase()，因为value似乎是数组而不是字符串。因此，该值必须为Array not string类型，并且您必须返回一个非console.log的数组。试试这个：

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

@Pipe({ 
    name: 'stringLowerCase' 
})
export class LowerCasePipe implements PipeTransform {
    transform(value: Array<string>) {
      return value.map((x)=>{ return x.toLowerCase() })
    }
}

Answer 2

您必须像下面将应用的那样应用自定义管道。

 <ul>
        <li *ngFor="let caption of captions ">
            {{caption | stringLowerCase }}
        </li>
    </ul>

然后在值转换后，在管道中返回，如下所示。

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

@Pipe({ 
    name: 'stringLowerCase' 
})
export class LowerCasePipe implements PipeTransform {
    transform(value: string) {
        console.log(value.toString().toLowerCase());
        return value.toLowerCase();
    }
}

Here is forked solution

Answer 3

请注意，.toLowerCase()仅在string数据类型上可用。要说的是，您需要确保数据为.toString()

的string

value.toString().toLowerCase()

Thanveer Shah中已经说过comment，您可以使用| lowercase，它们是内置为转换为字符串的。

有关使用的两个版本，请参见Fork。

说明：故意使用以下代码：

export class LowerCasePipe implements PipeTransform {
  transform(value) {
    console.log(value.toString().toLowerCase());
    for (let i = 0; i < value.length; i++) {
      value[i] = value[i].toString().toLowerCase();
    }
    return value;
  }
}

表明数据是一个数组。

但是如果您已经知道它是一个数组，则可以简单地使用：

export class LowerCasePipe implements PipeTransform {
 transform(value: Array<string>) {
      return value.map((x)=>{ return x.toLowerCase() })
    }
}

与other answer的Ferhad Othman中一样。

Answer 4

<li *ngFor="let caption of captions">
    {{caption | lowercase }}
</li>

<li *ngFor="let caption of captions">
    {{caption | uppercase }}
</li>

Answer 5

<li *ngFor="let caption of captions">
    {{caption | lowercase }}
</li>

stringLowerCase过滤器应用于ngFor

5 个答案: