如何使用snapshotChanges()方法同时获取键值和过滤数据?

用户名

我正在进行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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用AngularFirestore Collection orderBy和snapShotChanges方法

如何使用javascript过滤和获取限制数量的数据

如何同时使用键值状态和检查点?

如何使用PHP同时插入主键和外键值

如何使用过滤方法获取数组数据?

如何使用多个整数条件和键值过滤多个JSON

如何获取数组的键值和键值对

如何在 minimatch 模式中同时使用 NOT 和 OR 进行过滤?

如何使用reactjs从列表中同时过滤日期和时间

结合使用SnapshotChanges和CombineLatest

如何过滤不同键值的 json 数据并使用该键值创建新的 json 元素而无需硬编码数据

如何同时使用FutureBuilder和setState方法?

如何同时使用安全和 truncatechars 方法?

如何使用 EF 和列表过滤数据

使用RxJava同时从本地和远程获取数据

同时过滤和限制数据框行

如何使用多个整数条件和键值过滤JSON对象数组

使用 terraform 从 json 数据中获取键值

如何从日期列在 varchar 数据类型中的日期同时获取月份和年份。使用雪花工具

如何同时进行grep和过滤?

如何解析两个JSON数据从以下网址同时并获取地址从第一JSON和使用,获取数据在二JSON?

如何在yii 2中通过搜索和过滤来获取外键值而不是网格视图中的键?

Yajra 数据表同时使用搜索和自定义过滤器

如何使用 filter() 获取过滤数据的位置而不是值?

如何使用Pi Vision Web Api获取返回的过滤数据

如何在 React js 中使用获取的数据过滤数组?

如何在 vb.net WPF 和 MySQL 中使用 DataGrid 获取/过滤两个日期之间的数据?

使用数组内对象中的键值过滤数据

如何使用SeekToLast获取最后的键值