TypeError：无法读取未定义 Ionic 3 的属性“toLowerCase”答案

【问题标题】：TypeError: Cannot read property 'toLowerCase' of undefined Ionic 3TypeError：无法读取未定义 Ionic 3 的属性“toLowerCase”
【发布时间】：2019-01-25 06:48:55
【问题描述】：

我正在尝试使用一些位置数据在 Postpage 中创建一个搜索选项。但它给出的错误是 "TypeError: Cannot read property 'toLowerCase' of undefined" 。在这里添加这些代码。页面文件和对应的服务类已经在 app.module.ts 文件中声明。

post.html

<ion-header>

  <ion-navbar>
    <ion-title>Back</ion-title>
  </ion-navbar>

</ion-header>
<ion-content padding text-center>
   <ion-title>Search Restaurunt Location</ion-title>
      <ion-searchbar [(ngModel)]="searchTerm"   (ionInput)="setFilteredItems()"></ion-searchbar>

      <ion-list>
        <ion-item *ngFor="let data of locationdata">
            {{data.name}}
        </ion-item>
    </ion-list>

</ion-content>

post.service.ts

import { Injectable} from '@angular/core';
import 'rxjs/add/operator/map';

@Injectable()
export class Data

{
    locationdata:any;
constructor()
{
    this.locationdata=[
        { "name":"EKM"},
        {"name":"CBD"},
        { "name":"KLM"},
        { "name":"KTR"},
        { "name":"CDL"},

    ];
}
    filteritems(searchTerm)
    {
        return this.locationdata.filter((item) => {
            return item.name.toLowerCase().includes(item.searchTerm.toLowerCase());
        });  
    }
}

Post.ts

import { Component  ,ViewChild, ElementRef} from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Data}from './post.service'
declare var google :any;

/**
 * Generated class for the PostPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-post',
  templateUrl: 'post.html',
})
export class PostPage {
@ViewChild('map')mapref : ElementRef;
map:any;
searchTerm:any;
locationdata:any;

  constructor(public navCtrl: NavController, public navParams: NavParams , public data :Data) {
  }

  ionViewDidLoad() {
    // this.showmap();
    this.setFilteredItems();
  }

setFilteredItems()
{
  this.locationdata= this.data.filteritems(this.searchTerm)
}

}

Post.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PostPage } from './post';

@NgModule({
  declarations: [
    PostPage,
  ],
  imports: [
    IonicPageModule.forChild(PostPage),
  ],
})
export class PostPageModule {}

【问题讨论】：

searchterm 不是来自项目对象，所以在搜索词之前删除项目

标签： angular ionic3

【解决方案1】：

您需要检查item.name 是否未定义，这里我认为searchterm 在item 对象中不可用，它应该来自filteritems 函数的参数变量。

filteritems(searchTerm)
    {
        return this.locationdata.filter((item) => {
              if(item.name && searchTerm) {
                return item.name.toLowerCase().includes(searchTerm.toLowerCase());
              }
        });  
    }

【讨论】：

【解决方案2】：

只需从您的 include 方法中删除 item 参数。

    filteritems(searchTerm:string)
    {
         if(searchTerm){        
 return this.locationdata.filter((item) => {
                        return item.name.toLowerCase().includes(searchTerm.toLowerCase());
                    }); 
                     }
    }

item.searchTerm.toLowerCase() 表示您正在尝试访问 item 对象的属性 searchTerm ({ "name": "EKM"}) ，因此它是未定义的，然后 toLowerCase() 的未定义为错误。

【讨论】：