小编use*_*959的帖子

我正在开发一个Angular Firebase项目,我需要过滤我的数据库并获取关键值.目前我在我的服务代码中使用valueChanges()方法(在getUnreadBooks和getFavoriteBooks方法中,如下所示)来获取数据并对其进行过滤.但是当我尝试在模板文件中获取键值时,它给我的关键值为'undefined'.我尝试使用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() …

我正在尝试使用 CSS 实现以下投影效果：

我尝试过使用<hr>线性渐变设计元素作为背景图像，作为box-shadow在图像上使用规则的替代方案，但它不会产生所需的弯曲阴影效果。

我想要做的事情只能通过 CSS 实现吗？

这是我当前的代码：

超文本标记语言

<section class="section-categories section-fruits">
    <div class="row">
        <figure class="categories">
            <img src="res/img/category/fruits.png" alt="Offers" class="categories__fruits">
        </figure>
        <div class="categories__explore">
            <p>Fruits & Vegetables</p>
            <p>A variety of fresh fresh and vegetables</p>
            <button>Explore fruit and veg</button>
        </div>
    </div>
</section>

CSS

/* Using Box Shadow, but didn't get the desired effect */    
.section-categories{
    height: 250px;
    margin: 20px 0px;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}