*ngIf only if it matches a value in an array in firestore

Question

I'm working in Firestore, I try to show an image only if the uid of the user matches a value of a Array. Can someone give me an idea of how to do it?

So far I have been able to do it but with a string and it works well:

<div *ngIf="auth.user | async as user">
  <img *ngIf="evento.favoritos2 === user.uid " src="assets/icons/Icon_bookmark02.svg" alt="iconFavorito">
</div>

But in the case of an Array, how would it be?

I tried this but it did not work:

<div *ngIf="auth.user | async as user">
  <img *ngIf="evento.indexOf(favoritos) === user.uid " src="assets/icons/Icon_bookmark02.svg" alt="iconFavorito">
</div>

Answer 1

If you want to check if the favoritos array contains the user id you could use the find method.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

But you can not use array methodes inside a *ngIf directive.

You have to subscribe to your auth observable inside your component.ts file.

Here an example:

component.ts

ngOnInit() {
    this.auth.subscribe( user => {
        this.user = user;
        this.showImage = this.evento.favoritos.find(element => element === user.uid);
    }
}

component.html

div *ngIf="user">
<img *ngIf="showImage" src="assets/icons/Icon_bookmark02.svg" alt="iconFavorito">
</div>

I do not know your exact code, so you maybe have to modify the code a little. And do not forget to unsubscribe inside ngOnDestroy.

Answer 2

The indexOf() method searches the array for the specified item and returns its position and not True/False

favoritos is an array and you are checking index of on evento

  <img *ngIf="evento.favoritos.indexOf(user.uid) !== -1" src="assets/icons/Icon_bookmark02.svg" alt="iconFavorito">