Angular *ngIf 检查地图中是否存在密钥答案

【问题标题】：Angular *ngIf check if key exists in mapAngular *ngIf 检查地图中是否存在密钥
【发布时间】：2018-08-02 16:19:26
【问题描述】：

我有一张看起来像这样的地图：

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

【问题讨论】：

是的，通常你会在 .ts 文件中调用一个方法
mapToSearch 实际上只是一个对象，而不是地图

标签： angular ecmascript-6 angular-ng-if

【解决方案1】：

使用以下简单方法即可实现。

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

【讨论】：

如果是正确答案请标记。它可能对其他人也有帮助
如果 mapToSearch[keyToFind] = 0 或 false 则失败

【解决方案2】：

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

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

一个好习惯是在你的组件中设置一个布尔值，并在你的集合/对象发生变化时更新该布尔值。通常，当您有更复杂的场景时，页面上没有太多需要更新布尔值的操作。因此，最好自己在组件中跟踪这些变化，而不是让 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);
}

【讨论】：

将此标记为正确答案 - 这不是我所需要的，但它使我处于正确的位置。谢谢瑞恩！

【解决方案3】：

您可以使用hasOwnProperty 检查属性是否在mapToSearch 中定义（请参阅this stackblitz）：

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

如果属性存在，hasOwnProperty 将返回 true，即使关联的值是虚假的。这与mapToSearch[keyToFind] 不同，在以下情况下会返回false：

prop: ""
prop: 0

【讨论】：

如何直接从 json 文件中检查，我想检查条件中的键和值？

【解决方案4】：

<ng-container *ngIf="mapToSearch.aaa === '123'">
  Hello world
</ng-container>

如果 mapToSearch 没有定义 aaa，那么结果就是 undefined

【讨论】：

【解决方案5】：

由于您的数据是对象，如果您使用的是 Angular 6.1，您可以使用 keyvalue

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

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

html

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

ts

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

【讨论】：

我相信你有一个错字 keyToFind 需要更改为 KeyToFind。反之亦然

【解决方案6】：

您可以执行以下操作

<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;
     }
}

【讨论】：