CODEWITHSUNDEEP
angularfirebase
Paco Zevallos
Paco Zevallos

Reputation: 2275

Firestore Array contains ngIf

I have the following data structure in firestore:

avisos: { //colection
  documentId1: { //documentId
    titulo: 'myTitle1'
    favoritos: ['three', 'two', 'one']
  },
  documentId2: {
    titulo: 'myTitle2'
    favoritos: ['two', 'five', 'four']
  },
  documentId3: {
    titulo: 'myTitle3'
    favoritos: ['eight', 'six', 'two']
  }
}

So I want to show an icon only if the two value is in the favoritos matrix, then I tried the following:

<div>
  <span>{{ aviso.categoria}}</span> //I have no problems with this
  <mat-icon *ngIf="aviso.favoritos.includes('two')">favorite_border</mat-icon>
</div>

but I get the following error:

TypeError: Cannot read property 'includes' of undefined

I have also tried this, but I get the same error:

this.favoritos = this.afs.collection('avisos', ref => ref.where('favoritos', 'array-contains', 'two') ).valueChanges();

Any idea how I can address this issue?

Upvotes: 1

Views: 68

Answers (1)

jitender
jitender

Reputation: 10429

First check if avisos is not undefined in your component.If so Then you can't access aviso.favoritos directly you have to change it to aviso.documentId1.favoritos same thing for documentId2,documentId3 as well.Also use Safe navigation oprator? to avoid errors when data is loading so your code should look like

<mat-icon *ngIf="aviso?.documentId1?.favoritos?.includes('two') || aviso?.documentId2?.favoritos?.includes('two') || aviso?.documentId3?.favoritos?.includes('two')">favorite_border</mat-icon>

Upvotes: 3

Related Questions