Система Favorites (с хранилищем) с Firebase угловой - PullRequest
0 голосов
/ 25 октября 2018

У меня есть локальное хранилище избранного и база данных firebase.Чтобы проверить, является ли элемент любимым или нет, вы можете передать ключ элемента и проверить с помощью функции «Избранное».Все это работает.

Моя проблема: как мне объединить список избранных (этот список содержит только ключ, а не наблюдаемый) со списком элементов (которые являются наблюдаемыми) и создать новый списокObservables только с любимыми предметами.С этим новым списком я могу показывать только избранные предметы.

Я использую ionic v3

favouritos.html

    <ion-header>
    <ion-navbar color="amarelo">

      <ion-buttons left>
        <button ion-button icon-only menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
      </ion-buttons>

      <ion-title >
          Favoritos
      </ion-title>

    </ion-navbar>
    </ion-header>


     <ion-content class="cards-bg" padding>
   <ion-card *ngFor="let fav of favoritos$ | async" detail-push 
     navPush="AudioPlayerPage"[navParams]="{fav:fav}">
     <ion-card-content>
       <ion-card-title>
         {{fav.titulo}} 
      </ion-card-title>
      <p>
        {{fav.descricao}}
      </p>
    </ion-card-content>

  </ion-card>
</ion-content>

favouritos.ts

import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Producao } from '../../models/producao';
import { Observable } from 'rxjs';
import { ProducoesProvider } from '../../providers/producoes/producoes'
import { FavoriteProvider } from './../../providers/favorite/favorite';
import { AngularFireDatabase } from '@angular/fire/database';

@IonicPage()
@Component({
  selector: 'page-favoritos',
  templateUrl: 'favoritos.html'
})
export class FavoritosPage {

  public isFavorite = false;
  favoritos$: Observable<Producao[]>;

  constructor(public navCtrl: NavController,  public favoriteProvider: FavoriteProvider, public navParams: NavParams, 
    public producoesProvider: ProducoesProvider, private db: AngularFireDatabase) {
      this.favoritos$ = this.producoesProvider.favoriteProducts();
      console.log(this.favoritos$);
  }

  ionViewWillLoad(){
  }

}

favourite.ts (это провайдер)

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { Observable } from 'rxjs';
import { Producao } from '../../models/producao';

const STORAGE_KEY = 'favoriteProds';

@Injectable()
export class FavoriteProvider {

  constructor(public storage: Storage) { 

  }

  isFavorite(prodId) {
    //console.log(prodId);
    if(this.storage.ready()){
    return this.getAllFavoriteProds().then(result => {
      //console.log(result && result.indexOf(prodId) !== -1)
      return result && result.indexOf(prodId) !== -1 ;
    });

  }
}

  favoriteProd(prodId) {
    console.log(prodId);
    return this.getAllFavoriteProds().then(result => {
      console.log(result);
      if (result) {
        result.push(prodId);
        return this.storage.set(STORAGE_KEY, result);
      } else {
        return this.storage.set(STORAGE_KEY, [prodId]);
      }
    });
  }

  unfavoriteProd(prodId) {
    return this.getAllFavoriteProds().then(result => {
      if (result) {
        var index = result.indexOf(prodId);
        result.splice(index, 1);
        return this.storage.set(STORAGE_KEY, result);
      }
    });
  }

  getAllFavoriteProds() {
    if(this.storage.ready()){
      return this.storage.get(STORAGE_KEY);
    }
  }

}

producoes.ts (другой провайдер)

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { getAllDebugNodes } from '@angular/core/src/debug/debug_node';
import { Producao } from '../../models/producao';
import { Categoria } from '../../models/categoria';
import { Observable, from } from 'rxjs';
import { map } from 'rxjs/operators';
import { FavoriteProvider } from '../favorite/favorite';
import { switchMap, mergeMap, filter, mapTo, toArray } from 'rxjs/operators';


@Injectable()
export class ProducoesProvider {

  private prodListRef = this.db.list<Producao>('prod-list');
  private catListRef = this.db.list<Categoria>('cat-list'); 


  constructor(public db: AngularFireDatabase, public _favs: FavoriteProvider) {
   }


  allProducts() {
    return this.prodListRef
    .snapshotChanges()
    .pipe(
      map(changes => {
    return changes.map (c => ({
      key: c.payload.key, ...c.payload.val()
    })).reverse()
  })
);

  }  

  favoriteProducts() {
   return this.allProducts().pipe(
   switchMap(ap => from(ap)),
      mergeMap(p => {
        return from(this._favs.isFavorite(p)).pipe(
          filter(Boolean),
          mapTo(p)
        );
      }),
      toArray()
    );
  }  
}

Он не показывает никаких ошибок, но не работает

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