I added a search bar to my project, and took the code from ionic docs
getItems(ev: any) {
this.initializeItems();
const val = ev.target.value;
if (val && val.trim() != '') {
this.items = this.items.pipe(filter(item => {
console.log(item);
let t = item.title;
return (t.toLowerCase().indexOf(val.toLowerCase()) > -1);
}))
}
}
This is how I'm initializing the items
initializeItems(){
this.items = this.newslist;
}
And in the constructor
this.newslist = afDB.list('information/news', (ref) => ref.orderByChild('inverteddatetime')).snapshotChanges().pipe(
map(actions =>
actions.map(a => ({ key: a.key, ...a.payload.val() }))
)
);
The error that I'm getting is at let t = item.title; where "title" is underlined red with the message
Property "title" does not exist on type {}
When I log item in console.log(item); I get the correct results back though with their appropriate properties:
(2) [{…}, {…}]
0:{
datetime:"Saturday, June 23, 2018 12:28 AM"
image:"data:image/jpeg;base64,/9j/4..."
inverteddatetime:-1529703181246
key:"-LFdPXgxgAQA1RVnGmMD"
subtitle:"Water can cause problems, be wary of the things."
text:"Water quality is a subject that’s been big news lately. Residents of Flint, Michigan are suffering from toxic levels of lead in ..."
title:"12 Toxins in Your Drinking Water"
}
1 : {key: "-LFXmks2UICxqTNkicNv", datetime: "Thursday, June 21, 2018 5:35 PM", subtitle: "Unfortunate problems", …} length : 2
__proto__ : Array(0)
Data Structure: Firebase Data Structure (I don't have enough reputation to display it on the thread)
I have a simple question, I don't understand why I can't reach the property "title" of the item although when I log it it shows all items and their properties. Is it because it's returning JSON and I should map it to an array?
This is type error that occurs since typescript is not “aware” of your object’s (“item” in this case) data shape. Normally you would want to type it and thus resolve it, like this:
let t = (item as any).title
But in your case here it seems like you are trying to apply filter similarly how someone did that in this issue: Observable of array with filter using Angular 5 with RxJS
Your solution should be 1:1 similar: apply .map onto the observable you have (this.items.map( etc ) )
Like this:
getItems(ev: any) {
this.initializeItems();
const val = ev.target.value;
if (val && val.trim() != “”) {
this.items = this.items.map( items => items.filter( item => :::your filter condition here:::))
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments