时间戳

首页 > 解决方案 > Angular（和 JHipster）的问题：value.toLowerCase 不是函数

angular - Angular（和 JHipster）的问题：value.toLowerCase 不是函数

问题描述

使用我的过滤器（使用字段搜索过滤实体的行），会出现此问题：ERROR TypeError: "value.toLowerCase is not a function"。我不知道为什么以及如何解决它。searchText = searchText.toLowerCase();我的实体的字段是除 ID 外的字符串，当我在 .ts 中评论该行或删除toLowerCase()时问题仍然存在return it.toLowerCase().includes(searchText);

更新：即使出现问题：

export class FilterPipe implements PipeTransform {
    transform(items: any[], searchText: string): void {
}

所以我真的想知道是否没有 JHipster 限制，因为它只适用于 Angular as ng serve。

.ts ：

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

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
    if (!items) {
        return [];
    }
    if (!searchText) {
        return items;
    }

    searchText = searchText.toLowerCase();

    return items.filter(it => {
        return it.toLowerCase().includes(searchText);
    });
}
}

.html：

<div class="table-responsive" *ngIf="laboratories">
    <table class="table table-striped">
        <thead>
        <tr>
            <th><span>ID</span></th>
            <th><span>Name</span></th>
            <th><span>Adress</span></th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let laboratory of laboratories | filter:searchText ;trackBy: trackId">

标签： angularfilterpipejhipster

解决方案

您正在对collections进行迭代。当你使用 ngFor 时，它会遍历一个数组。我认为这是一系列实验室。

这意味着您的对象是实验室。

在您的代码中，您认为您的实验室是一个字符串：

return items.filter(it => {
  return it.toLowerCase().includes(searchText);
});

也许你应该添加一些字段来过滤？

return items.filter(it => {
  return it.name.toLowerCase().includes(searchText);
});

另外，正如我在评论中所说：

不要使用过滤管

推荐阅读