应用于 ngFor 的 stringLowerCase 过滤器

Question

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

Demo link

Answer 1

请注意，.toLowerCase() 仅可用于 string 数据类型。也就是说，您需要确保数据是string 与：.toString()

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 2

你不能使用value.toLowerCase()，因为值似乎是一个数组而不是一个字符串。因此，该值必须是数组类型而不是字符串，并且您必须返回一个数组而不是 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 3

您必须像下面这样应用您的自定义管道，它才会起作用。

 <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 4

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

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

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

Answer 5

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