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.aaa === '123'">
  Hello world
</ng-container>

如果 mapToSearch 没有定义 aaa，那么结果将为未定义值

Answer 2

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

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

Answer 3

因为你的数据是对象你可以使用 keyvalue 如果你正在使用 angular 6.1

<div *ngFor="let key of mapToSearch | keyvalue">
<ng-container *ngIf="key.key==keyToFind">
Hello world
</ng-container>
</div>

如果你的数据是数组那么你可以使用方法return数据

html

 <ng-container *ngIf="KeyToFind(keyToFind)">
      Hello world
    </ng-container>

ts

KeyToFind(ktf){
 return this.mapToSearch.map(data=>data[ktf]; }).indexOf(ktf);
}

Answer 4

您可以检查属性是否在 mapToSearch 中定义为 hasOwnProperty (see this stackblitz):

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

如果属性存在，

hasOwnProperty 将 return true，即使关联的值为假。这与 mapToSearch[keyToFind] 不同，后者在以下情况下会 return false：

prop: ""
prop: 0

Answer 5

您可以执行以下操作

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

或者，你可以在组件中写一个函数：

<ng-container *ngIf="isKeySet(mapToSearch, keyToFind)"></ng-container>

public isKeySet(obj: any, key: string): boolean {
    return key in obj;
}

或者，你可以写一个管道：

<ng-container *ngIf="mapToSearch | isKeySet:keyToFind)"></ng-container>

@Pipe({name: 'isKeySet'})
export class IsKeySetPipe implements PipeTransform {
     public transform(value: any, key?: string) {
         return key in value;
     }
}

Answer 6

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

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

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

app.html

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

component.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);
}

Angular *ngIf 检查映射中是否存在键

Angular *ngIf check if key exists in map

ecmascript-6

angular-ng-if

angular