Angular *ngIf 检查地图中是否存在键

Question

我有一张地图，看起来像：

let mapToSearch =
{
  'aaa': '123',
  'bbb': '456'
}

我有一个变量：

let keyToFind = 'aaa';

在我的 HTML 模板中，在 Angular*ngIf块中，我想检查是否keyToFind与此地图中的任何键匹配。

像JS这样的东西array.indexOf()：

<ng-container *ngIf="mapToSearch.indexOf(keyToFind)">
  Hello world
</ng-container>

模板中的地图可以实现这样的事情吗？

---

更新（包括解决方案）

感谢您的所有回答。您的所有答案都适用于使用对象文字（这是我的错误 - 我应该在问题中以不同方式声明地图）。

但是，对于 ES6 地图，我发现我可以map.has(key)在模板中使用。

声明地图map.set()：

let mapToSearch = new Map();
mapToSearch.set('aaa', '123'};
mapToSearch.set('bbb', '456'};

模板：

<ng-container *ngIf="mapToSearch.has(keyToFind)">
  Hello World
</ng-container>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/has

Answer 1

如果使用以下简单方法，您可以实现。

<ng-container *ngIf="mapToSearch[keyToFind]">
  Hello world
</ng-container>

Answer 2

当向 *ngIf 指令提供表达式而不是原语时，请注意性能受到的影响。如果您提供一个表达式或函数，那么 Angular 的摘要循环每次都必须计算该表达式。要进行测试，请将 console.log() 语句添加到 ngIf 内的函数 - *ngIf="showMyElement()" - 并观察当您浏览应用程序时它被调用的次数。

Melindu 的答案非常好（对于你的情况我会这样做） - *ngIf="mapToSearch[keyToFind]"

一个好的习惯是在组件中设置一个布尔值，并在集合/对象发生更改时更新该布尔值。通常，当您有更复杂的场景时，页面上没有太多需要更新布尔值的操作。因此，最好自己在组件中跟踪这些更改，而不是让 Angular 重新评估每个摘要的表达式或函数。

应用程序.html

<div *ngIf="keyIsFound"></div>

组件.ts

keyIsFound: boolean;
mapToSearch = {};

private checkKey(key: string) {
    this.keyIsFound = this.mapToSearch[keyToFind]
}
// Collection changes
addToMap(newKey: string, newValue: any) {
   this.mapToSearch[newKey] = newValue;
   checkKey(newKey);
}