NG Observable для повторного использования Observable для просмотра конкретного объекта - PullRequest
Новая
       14

NG Observable для повторного использования Observable для просмотра конкретного объекта

0 голосов
/ 18 октября 2018

Мне нужна помощь. У меня есть сервисный компонент, и он получает данные, как показано ниже ..., но я хочу повторно использовать его на моем другом компоненте для отображения только определенной категории.

Я пытаюсьчтобы достичь, когда я нажимаю на ссылку, она отображается только в том случае, если выбрана ссылка на эту категорию.

как в примере.

Категория: {Молоко, мясо, фрукты}

МОДЕЛЬ.TS 

export interface Product {
    id?: string;
    category: string;
    name: string;
    price: number;
    image:string;
    description: string;

}

СЕРВИС.TS 

import { AngularFireDatabaseModule } from '@angular/fire/database';
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, 
AngularFirestoreDocument } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { Product } from '../model/Product';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  productCollection: AngularFirestoreCollection<Product>;
  product: Observable<Product[]>;
  productDoc: AngularFirestoreDocument<Product>;
  filter

  constructor(private afs: AngularFirestore) {
    this.productCollection = this.afs.collection('Product');
  }

  getProducts() {
    return this.product = this.productCollection.snapshotChanges().pipe(map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as Product
        const id = a.payload.doc.id;
        return { id, ...data }
      })
    }))
  }


  addProduct(data: Product) {
    this.productCollection.add(data);
  }

  // to navigate into edit
  getProductData(id: string) {
    this.productDoc = this.afs.doc<Product>(`Product/${id}`)
    return this.productDoc.valueChanges()
  }



  // to delete need to get id
  getProduct(id: string) {
    return this.afs.doc<Product>(`Product/${id}`)
  }

  delete(id: string) {
    return this.getProduct(id).delete()
  }

  updateProduct(id, formData) {
    return this.getProduct(id).update(formData)
  }

}

COMPONENT.TS 

import { ProductService } from './../../service/product.service';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Product } from 'src/app/model/Product';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-aquatic',
  templateUrl: './aquatic.component.html',
  styleUrls: ['./aquatic.component.css']
})
export class AquaticComponent implements OnInit {

  products: Observable<Product[]>;

  constructor( private productService: ProductService) { }

  ngOnInit() {
    this.products = this. productService.getProducts();
  }



}

COMPONENT.HTML 

<div *ngFor="let product of products | async">
  <p> {{ product.category}}</p>
  <p> {{ product.name }}</p>
  <p> <img src="{{ product.image }}"> </p>
</div>
...