我正在进行Angular Firebase项目,在该项目中,我还需要过滤数据库以及获取键值。当前,我在服务代码中使用valueChanges()方法(在getUnreadBooks和getFavoriteBooks方法内部,如下所示)以获取数据并对其进行过滤。但是,当我尝试在模板文件中获取键值时,它给我的键值是“未定义”。我尝试使用snapshotChanges()方法,但是无法解决如何使用它来获取键值以及过滤数据的问题。以下分别是我的Angular FirebaseService,home.component.ts(我在其中注入服务代码)和home.component.html(模板文件)代码:
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class FirebaseService {
books: Observable<any[]>;
unreadBooks;
favoriteBooks;
constructor(private db: AngularFireDatabase) {}
getBooks(){
this.books = this.db.list('/books').valueChanges() as Observable<any[]>;
return this.books;
}
getFavoriteBooks(){
this.favoriteBooks = this.db.list('/books').valueChanges() as Observable<any[]>;
this.favoriteBooks = this.favoriteBooks.map(books => {
const topRatedBooks = books.filter(item => item.rate>4);
return topRatedBooks;
})
return this.favoriteBooks;
}
getUnreadBooks(){
this.unreadBooks = this.db.list('/books').valueChanges() as Observable<any[]>;
this.unreadBooks = this.unreadBooks.map(books => {
const ub = books.filter(item => item.dateread == null);
return ub;
})
return this.unreadBooks;
}
}
Home.Component.ts文件=>
import { Component, OnInit } from '@angular/core';
import { FirebaseService } from '../../services/firebase.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
//favorite Books
favoriteBooks: any;
unreadBooks: any;
constructor(private firebaseService: FirebaseService) { }
ngOnInit() {
this.firebaseService.getFavoriteBooks()
.subscribe(favBooks => {
this.favoriteBooks = favBooks;
console.log(this.favoriteBooks);
})
this.firebaseService.getUnreadBooks()
.subscribe(ubBooks => {
this.unreadBooks = ubBooks;
console.log('Unread Books:', this.unreadBooks);
})
}
}
Home.component.html文件=>
<mat-toolbar>
My Top Rated Books
</mat-toolbar>
<mat-grid-list cols="3">
<mat-grid-tile *ngFor="let book of favoriteBooks">
<mat-card>
<mat-card-header>
<mat-card-title>
<h4>{{book.title}}</h4>
</mat-card-title>
</mat-card-header>
<img mat-card-image src="{{book.imageUrl}}" alt="{{book.title}}">
<mat-card-actions>
<button mat-button mat-raised-button class="detailsButton" [routerLink]="['/book/'+book.$key]">
<i class="material-icons">visibility</i>Book Details</button>
<button mat-button mat-raised-button class="editButton" [routerLink]="['/editbook/'+book.$key]">
<i class="material-icons">mode_edit</i>Edit Book</button>
</mat-card-actions>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
<mat-toolbar>
Books I have not read yet
</mat-toolbar>
<mat-grid-list cols="3">
<mat-grid-tile *ngFor="let book of unreadBooks">
<mat-card>
<mat-card-header>
<mat-card-title>
<h4>{{book.title}}</h4>
</mat-card-title>
</mat-card-header>
<img mat-card-image src="{{book.imageUrl}}" alt="{{book.title}}">
<mat-card-actions>
<button mat-button mat-raised-button class="detailsButton" [routerLink]="['/book/'+book.$key]">
<i class="material-icons">visibility</i>Book Details</button>
<button mat-button mat-raised-button class="editButton" [routerLink]="['/editbook/'+book.$key]">
<i class="material-icons">mode_edit</i>Edit Book</button>
</mat-card-actions>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
声明一个向id添加id的函数:
documentToDomainObject = _ => {
const object = _.payload.doc.data();
object.id = _.payload.doc.id;
return object;
}
并在您的getBooks方法中使用它:
getBooks(){
this.books = this.db.list('/books').snapshotChanges()
.pipe(map(actions => actions.map(this.documentToDomainObject)));
return this.books;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句