Html *ngIf取决于另一个div的可见性-角度

我试图根据另一个图像的可见性动态显示一些图像。我尝试了以下代码：

    <div *ngFor="let badge of user.progress.unlockedBadges">
      <img id="{{i}}_unlockedImage" *ngIf="badge == achievement.payload.doc.id"
        src="../../../assets/icons/unlocked_link.png" height="48" width="48">
    </div>
    <img *ngIf="document.getElementById({{i}}+'_unlockedImage')" src="../../../assets/icons/locked_link.png"
      height="48" width="48">

---

但它不起作用。是否有可能仅仅使用HTML就可以做到这一点？注意。

将纯JavaScript添加到角度模板将不起作用。。。具体而言：

*ngIf="document.getElementById({{i}}+'_unlockedImage')"

该变量必须在角度组件上下文中才能工作

您可以在组件中创建一个函数

showLock() {
 return this.user.progress.unlockedBadges.filter(badge => badge === this.achievement.payload.doc.id).length === 0;
}

改变你的观点

<img *ngIf="showLock()" src="../../../assets/icons/locked_link.png"
      height="48" width="48">

---

为什么要在*ngIf条件下添加JS代码？您到底想要实现什么？只需使用与其他元素相同的*ngIf即可。为什么这么复杂？如果我使用前一个If，它会在另一个NGF的内部显示几个使用ng的图像。只是想知道纯HTML是否有可能在模板中使用函数不是一个好的做法，它会在每次更改中起作用