按名称过滤 Firestore 数据
filter firestore data by name
我正在使用 nativescript Angular 构建一个社交应用程序,现在我正在尝试添加 "search" UI,用户可以在其中按姓名搜索其他用户
我的用户已经存储在 firebase firestore 中,我想按名称搜索他们,但是我收到 .subscribe 错误,如
error TS2339: Property 'subscribe' does not exist on type 'void'
这是我的代码:
export class HomeComponent implements OnInit {
ageValue: number = 0;
searchValue: string = "";
items: Array<any>;
name_filtered_items: Array<any>;
constructor(
public firebaseService: FirebaseService,
private router: Router
) { }
ngOnInit() {
this.getData();
}
getData(){
this.firebaseService.getUsers()
.subscribe(result => {
this.items = result;
this.age_filtered_items = result;
this.name_filtered_items = result;
})
}
viewDetails(item){
this.router.navigate(['/details/'+ item.payload.doc.id])
}
capitalizeFirstLetter(value){
return value.charAt(0).toUpperCase() + value.slice(1);
}
searchByName(){
let value = this.searchValue.toLowerCase();
this.firebaseService.searchUsers(value)
.subscribe(result => {
this.name_filtered_items = result;
this.items = this.combineLists(result, this.age_filtered_items);
})
}
combineLists(a, b){
let result = [];
a.filter(x => {
return b.filter(x2 =>{
if(x2.payload.doc.id == x.payload.doc.id){
result.push(x2);
}
});
});
return result;
}
}
FirebaseService.ts:
export class FirebaseService {
constructor( private ngZone: NgZone,) {}
getUsers(){
return firebase.firestore().collection('users').snapshotChanges();
}
searchUsers(searchValue){
return firebase.firestore().collection('users',ref => ref.where('nameToSearch', '>=', searchValue)
.where('nameToSearch', '<=', searchValue + '\uf8ff'))
.snapshotChanges()
}
}
这是我使用 angularfire2 的解决方案
import { AngularFireDatabase} from 'angularfire2/database';
import { map } from 'rxjs/operators';
constructor(private database: AngularFireDatabase) {}
searchUser(firstName: string) {
this.database.list('/profiles', ref => ref.orderByChild('firstName').equalTo(firstName))
.snapshotChanges().pipe(map(
changes=>{
return changes.map(c=>({
... c.payload.val()
}))
}
)).subscribe(users=>console.log("users with that firstname: ",users))
}
这是我的 firebase 数据库的样子:
带回调的 nativescript-plugin-firebase doesn't support snapshotChanges()
, you have to use onSnapshot 方法。
firebase.firestore().collection('users').onSnapshot((snapshot: firestore.QuerySnapshot) => {
snapshot.forEach(city => console.log(city.data()));
});
我正在使用 nativescript Angular 构建一个社交应用程序,现在我正在尝试添加 "search" UI,用户可以在其中按姓名搜索其他用户 我的用户已经存储在 firebase firestore 中,我想按名称搜索他们,但是我收到 .subscribe 错误,如
error TS2339: Property 'subscribe' does not exist on type 'void'
这是我的代码:
export class HomeComponent implements OnInit {
ageValue: number = 0;
searchValue: string = "";
items: Array<any>;
name_filtered_items: Array<any>;
constructor(
public firebaseService: FirebaseService,
private router: Router
) { }
ngOnInit() {
this.getData();
}
getData(){
this.firebaseService.getUsers()
.subscribe(result => {
this.items = result;
this.age_filtered_items = result;
this.name_filtered_items = result;
})
}
viewDetails(item){
this.router.navigate(['/details/'+ item.payload.doc.id])
}
capitalizeFirstLetter(value){
return value.charAt(0).toUpperCase() + value.slice(1);
}
searchByName(){
let value = this.searchValue.toLowerCase();
this.firebaseService.searchUsers(value)
.subscribe(result => {
this.name_filtered_items = result;
this.items = this.combineLists(result, this.age_filtered_items);
})
}
combineLists(a, b){
let result = [];
a.filter(x => {
return b.filter(x2 =>{
if(x2.payload.doc.id == x.payload.doc.id){
result.push(x2);
}
});
});
return result;
}
}
FirebaseService.ts:
export class FirebaseService {
constructor( private ngZone: NgZone,) {}
getUsers(){
return firebase.firestore().collection('users').snapshotChanges();
}
searchUsers(searchValue){
return firebase.firestore().collection('users',ref => ref.where('nameToSearch', '>=', searchValue)
.where('nameToSearch', '<=', searchValue + '\uf8ff'))
.snapshotChanges()
}
}
这是我使用 angularfire2 的解决方案
import { AngularFireDatabase} from 'angularfire2/database';
import { map } from 'rxjs/operators';
constructor(private database: AngularFireDatabase) {}
searchUser(firstName: string) {
this.database.list('/profiles', ref => ref.orderByChild('firstName').equalTo(firstName))
.snapshotChanges().pipe(map(
changes=>{
return changes.map(c=>({
... c.payload.val()
}))
}
)).subscribe(users=>console.log("users with that firstname: ",users))
}
这是我的 firebase 数据库的样子:
带回调的 nativescript-plugin-firebase doesn't support snapshotChanges()
, you have to use onSnapshot 方法。
firebase.firestore().collection('users').onSnapshot((snapshot: firestore.QuerySnapshot) => {
snapshot.forEach(city => console.log(city.data()));
});