* ng（仅当它与Firestore中的数组中的值匹配时）

Question

我在Firestore中工作，我尝试仅在用户的uid与Array的值匹配时显示图像。有人可以给我一个想法吗？

到目前为止，我已经可以做到了，但是只需使用字符串即可，并且效果很好：

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

但是对于数组，情况如何？

我尝试过，但是没有用：

<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

如果要检查favouritos数组是否包含用户ID，可以使用find方法。

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

但是您不能在*ngIf指令内使用数组方法。

您必须在component.ts文件中订阅可观察的身份验证。

以下是一个示例：

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>

我不知道您的确切代码，因此您可能需要稍微修改一下代码。并且不要忘记在ngOnDestroy内部退订。

Answer 2

indexOf（）方法在数组中搜索指定的项目并返回其位置，而不是 True / False

收藏夹是一个数组，您正在检查 evento

上的索引

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