角度* ng如果檢查地圖中是否存在關鍵點

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/zh-CN/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]”

要養成的好習慣是在組件中設置布爾值，並在集合/對象發生更改時隨時更新該布爾值。 通常，當您具有更復雜的方案時，頁面上沒有太多需要更新布爾值的操作。 因此，最好是自己在組件中跟蹤這些更改，而不是讓角度重新評估表達式或每個摘要的功能。

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，那么結果將是值undefined

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

您可以檢查是否在具有hasOwnProperty的 mapToSearch定義了屬性（請參見此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;
     }
}