ウェブサイト検索

javascript - *ngIf を使って Angular 2 のテンプレートで空のオブジェクトを確認する方法

オブジェクトが空かどうかを確認したいので、要素をレンダリングしないでください。そして、これが私のコードです:

<div class="comeBack_up" *ngIf="previous_info != {}">
  <a [routerLink]="['Inside_group_page',{'name':previous_info.path | dotTodash }]">
    {{ previous_info.title }}
  </a>
</div>

でも私のコードは間違っています、これを行う最良の方法は何ですか？

回答 #1

これであなたが望むことができるはずです:

<div class="comeBack_up" *ngIf="(previous_info | json) != ({} | json)">

または短い

<div class="comeBack_up" *ngIf="(previous_info | json) != '{}'">

各{}は新しいインスタンスを作成し、異なるオブジェクトインスタンスの====比較は常にfalseになります。文字列に変換されると、===はtrueになります。

Plunkerの例

回答 #2

上記の回答から、次のものはうまくいかなかったか、あまり好ましくありませんでした:

  • (previous_info | json) != '{}' は {} が空の場合にのみ機能し、null や undefined の場合には機能しません
  • `Object.getOwnPropertyNames(previous_info).length` も機能しませんでした。テンプレート内では `Object` にアクセスできないためです
  • 専用の変数 this.objectLength=Object.keys(this.previous_info).length !=0; を作りたくありません。

  • 専用の関数を作りたくありません

    isEmptyObject(obj) {
   return (obj && (Object.keys(obj).length === 0));
}

解決策：keyvalue パイプと ?.（セーフナビゲーション演算子）を使います。そして、それは簡単なようです。

previous_info=null または previous_info=undefined または previous_info={} の時にうまく動作し、偽値として扱います。

<div  *ngIf="(previous_info | keyvalue)?.length">

keyvalue - オブジェクトまたはマップをキーと値のペアの配列に変換します。

?. - Angularのセーフナビゲーション演算子（?.）は、nullやundefinedを防ぐための流暢で便利な方法です

デモ： Angular 9でのデモですが、以前のバージョンでも動作します

回答 #3

そのようなものも使うことができます:

<div class="comeBack_up" *ngIf="isEmptyObject(previous_info)"  >

コンポーネントで定義されたisEmptyObjectメソッドを使って：

isEmptyObject(obj) {
  return (obj && (Object.keys(obj).length === 0));
}

回答 #4

上の答えは問題ありません。しかし、ビューで次を使用するための本当に良い方法を見つけました：

{{previous_info?.title}}

おそらく重複した質問 Angular2 - {{object.field}} が存在するかどうかを確認しないとエラーになる

関連記事