Access the selected object of *ngFor into .ts

@PauloInc wrote:

Basically, i have a system that stores information into a firebase database. Im marking some of this information with ‘favorite’ and storing with Storage, and to do this im passing each ‘key’ of my stored data to a function that will check is this key is ‘isFavorite’ or not.

My objective: Create a page that will show only the data that is mark as ‘isFavorite’

My problem: I cant access the ‘prod.key’ of the *ngFor=“let prod of prodsList$ | async” into the .ts file to check if he’s mark as ‘isFavorite’ or not.

favoritos.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">
  <ion-card *ngFor="let prod of prodsList$ | async" detail-push navPush="AudioPlayerPage"[navParams]="{prod:prod}">
    <ion-card-content *ngIf="isFavorite">
      <ion-card-title>
        {{prod.titulo}} 
      </ion-card-title>
      <p>
        {{prod.descricao}}
      </p>
    </ion-card-content>

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

favoritos.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 { map } from 'rxjs/operators';
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 {

  isFavorite = false;
  prodsList$: Observable<Producao[]>;
  prod: Producao;

  constructor(public navCtrl: NavController,  public favoriteProvider: FavoriteProvider, public navParams: NavParams, 
    public producoesProvider: ProducoesProvider, private db: AngularFireDatabase) {
      
      this.prod = this.navParams.get('prod');
      console.log("A key é "+this.prod.key);
      this.favoriteProvider.isFavorite(this.prod.key).then(isFav => {
        this.isFavorite = isFav;
      })

      this.prodsList$ = this.producoesProvider.getProdsList()
        .snapshotChanges()
        .pipe(
          map(changes => {
            return changes.map(c => ({
              key: c.payload.key, ...c.payload.val()
        }))
      })
    );

  }

    showAllProds() {
      this.prodsList$ = this.producoesProvider.getProdsList()
        .snapshotChanges()
        .pipe(
          map(changes => {
        return changes.map (c => ({
          key: c.payload.key, ...c.payload.val()
        }))
      })
    );
    }

}

Posts: 3

Participants: 2

Read full topic