javascript - *ngIf 数组中存在值

Question

我有一个关于 ngIf 指令的问题。

我的应用程序中有一些动态生成的 Angular Material 切换，它们都有一个特定的 ID。我想知道，我知道使用 ngIf 指令我可以有条件地在我的页面上显示这些元素。我正在将 ngIf 用于其他功能，但我对如何检查元素的 id 是否存在于数组中有点迷茫。

数组看起来像这样:

["fc-vis", "fc-bis", "fc-dis"]

我的开关都有 id:fc-vis/fc-bis ... 等等。

我试过使用 ngIf 但我不知道如何在条件中发送元素的 id...或者我可能做错了什么

我想做的是:

*ngIf="object.id in myArrayList" 

或

*ngIf="checkIfExists(object.id)"

知道如何在条件中使用对象的 ID 来检查它是否存在于该数组中吗？

Answer 1

如果你支持现代浏览器，那么你可以使用Array includes()这里的方法如下:

*ngIf="myArrayList.includes(object.id)" 

• includes() 方法确定数组的条目中是否包含某个值，并根据需要返回 true 或 false。因此调用此方法后无需在此处进行额外检查。

为了同样支持 IE，您可以使用 Array indexOf()这里的方法如下:

*ngIf="myArrayList.indexOf(object.id) > -1" 

• indexOf() 方法返回可以在数组中找到给定元素的第一个索引，如果不存在则返回 -1。因此，在调用此方法后，我们还需要进行额外检查，以查看从 indexOf() 方法返回的值是否大于 -1 并基于此*ngIf 将显示或隐藏该元素。