Angular2 空オブジェクト チェック *ngIf

以下は、空オブジェクトをチェックする*ngIfディレクティブの使用方法の例です。

<div *ngIf="!myObject || Object.keys(myObject).length === 0">
  オブジェクトは空です。
</div>

上記のコードでは、myObjectが空オブジェクトかどうかをチェックします。空オブジェクトの場合、*ngIfディレクティブによってdiv要素がレンダリングされます。

<div *ngIf="myObject && Object.keys(myObject).length > 0">
  オブジェクトは空ではありません。
</div>

• !myObjectは、オブジェクトmyObjectがnullまたはundefinedかどうかをチェックします。
• Object.keys(myObject).lengthは、オブジェクトmyObjectのプロパティの数を返します。

Angular 2テンプレートで空オブジェクトをチェックする*ngIfディレクティブの例

例1: Object.keys()を使用する

<div *ngIf="!myObject || Object.keys(myObject).length === 0">
  オブジェクトは空です。
</div>

• !myObject: myObjectがnullまたはundefinedの場合、trueを返します。

<div *ngIf="!myObject || Object.values(myObject).length === 0">
  オブジェクトは空です。
</div>

<div *ngIf="!myObject || Object.entries(myObject).length === 0">
  オブジェクトは空です。
</div>

例4: JSON.stringify()を使用する

<div *ngIf="!myObject || JSON.stringify(myObject) === '{}'">
  オブジェクトは空です。
</div>

• JSON.stringify(myObject) === '{}': myObjectが空オブジェクトの場合、JSON文字列は{}になります。
• JSON.stringify(myObject): myObjectをJSON文字列に変換します。

カスタムパイプを使用する

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'isEmptyObject'
})
export class IsEmptyObjectPipe implements PipeTransform {
  transfor   m(value: any): boolean {
    return !value || Object.keys(value).length === 0;
  }
}

<div *ngIf="myObject | isEmptyObject">
  オブジェクトは空です。
</div>

*ngIfと組み合わせて条件式を使用する

<div *ngIf="!myObject || (myObject && Object.keys(myObject).length === 0)">
  オブジェクトは空です。
</div>

<div *ngFor="let key of Object.keys(myObject); let i = index">
  </div>

<div [ngSwitch]="myObject ? Object.keys(myObject).length : 0">
  <template ngSwitchCase="0">オブジェクトは空です。</template>
  <template ngSwitchDefault>オブジェクトは空ではありません。</template>
</div>