mercredi 25 octobre 2017

How to change of ionic-icon based *ngFor and firestore

I have one collection called cards

  export interface Card {
    category: string;
    description: string;
    title: string;
    url_articulo: string;
    url_img: string;
    source: string;
    date: any;
  }

and its subcollection called likes with userId as id and this structure for each doc (it's part of cards):

export interface Like {
    like: boolean;
    userId: string;
    idcard: string;
  }

Any of this cards contain subcollection likes this collection is created when user click in ion-icon

home.html

<ion-card *ngFor="let card of cardsArray; let i = index">
 <img style="padding:15px" (click)="openUrl(card.url_articulo)" [src]="card.url_img | sinfoto" onError="this.src='assets/img/noimage.png'" />
      <ion-card-content>
    ......
<ion-icon (tap)="saveCard(card, card.id, i)" color="danger" style="font-size:38px" class="show" [name]="condition ?  'heart' : 'heart-outline'"></ion-icon>
</ion-card-content>
</ion-card>

I want to change ionic-icon based in like (Boolean) I try to retrieve all collection a its subcollection with a query but it is not supported in firestore, now I can change state in firestore when user clic on ionic-icon like this.

   saveCard(card, idCard, index) {
 
 //referecia para escuchar cambios en nuestro doc Like
    const refFav: AngularFirestoreDocument<Like> = this.firestore.doc<Like>('cards/' + idCard + '/favs/' + this.uid);

  // referencia para nuestro documento liked users
    const refUser:AngularFirestoreDocument<User> = this.firestore.doc('users/'+this.uid+'/favs/'+ idCard);
    
    
    // verificamos si la referencia existe.
    const getrefav = refav.get();
    getrefav.then(doc => {
      if (doc.exists) {
         this.streamFav = refFav.valueChanges();
        const sus = this.streamFav.subscribe(data => {

          this.LikeArray = data;
          console.log(' like array', data);
          
          
          if (this.LikeArray.like == true) {
              refav.update({ like: false, idcard: idCard });
              index
              refUser.delete();
              sus.unsubscribe();
          } else {
            refav.update({ like: true,  idcard: idCard });
              refUser.set(cardObject);
              sus.unsubscribe();
          }
        })
      } else {

        // objeto like
        const likeObject = {
          like: true,
          userId: this.uid
        }
        refav.set(likeObject);
      }
    }) 
 
   }

But no ion-icon in DOM




Aucun commentaire:

Enregistrer un commentaire