angular - Angular TypeError:无法读取属性“toLowerCase”
问题描述
我正在尝试使用离子搜索栏过滤一组项目,但我的 ts 函数给了我一个错误:
错误类型错误:无法读取属性“toLowerCase”
html代码
<ion-searchbar (ionInput)="function($event)" showCancelButton="never"></ion-searchbar>
<div *ngFor="let item of items | async">
{{item.data.titre}}
</div>
打字稿代码
itemsCollection: AngularFirestoreCollection<Item>;
items:Observable<any[]>;
ngOnInit(){
this.itemsCollection=this.fs.collection('Items', ref=>ref.orderBy('Timestamp', 'desc'));
this.items=this.itemsCollection.snapshotChanges().pipe(
map(actions => {
return actions.map(a=>{
const data=a.payload.doc.data() as Item;
const id = a.payload.doc.id;
return{ id, data};
})
}));
}
function(ev:any){
this.ngOnInit();
let val=ev.target.value
if(val && val.trim()!=''){
this.items = this.items.filter((item: any) => {
return (item.titre.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
我无法解决,谢谢你帮助我
解决方案
<div *ngFor="let item of items | async">
{{item.data.titre}}
</div>
您错过了data
items 数组的每个对象的属性。
肯定是: -
this.items = this.items.filter((item: any) => {
return (item.data.titre.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
推荐阅读
- c# - 如何使用另一个类的列表视图数据?
- azure - 如何在 azure 门户网站中获取所有 Web 应用程序的 URL/URL 列表
- c++ - 为 c/c++ 函数调用设置超时
- javascript - D3非圆弧
- unity3d - Oculus Go - 检测运动
- java - ANTLR-4.7.1:不推荐使用 ANTLRInputStream 类型
- android - android jni调用方法错误
- html - 如果单击 iframe 中的任何链接,为什么 iframe 的 src 属性不会更改?
- angular - 带有辅助按钮的 mat-nav-list
- ssl - SSL 实现 oracle apex