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的摘要循环将不得不每次都评估表达式。要进行测试，请在ngIf-* ngIf =“ showMyElement（）”-内的函数中添加console.log（）语句，并观察在应用程序中导航时调用了多少次。

梅林杜的答案很好（对于您的情况，我会这样做）-* ngIf =“ mapToSearch [keyToFind]”

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

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

Answer 3

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

如果mapToSearch没有定义aaa，则结果将是未定义的值

Answer 4

由于您的数据是对象，因此可以使用键值（如果使用的是Angular 6.1）

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

Answer 5

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

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

hasOwnProperty将返回true（如果该属性存在），即使关联的值是伪造的。这与mapToSearch[keyToFind]不同，后者在以下情况下将返回false：

prop: ""
prop: 0

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

角度* ng如果检查地图中是否存在关键点

6 个答案: