web-dev-qa-db-ja.com

* 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>

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

javascripttypescriptangular
40
Alireza Valizade

これはあなたが望むことをするはずです：

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

以下

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

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

プランカーの例

78
Günter Zöchbauer

次のようなものを使用することもできます。

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

コンポーネントにisEmptyObjectメソッドが定義されている場合：

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

上記の答えは大丈夫です。しかし、私はビューで次を使用する本当に素晴らしいオプションを見つけました：

{{previous_info？.title}}

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

11
Damiani

これは私のために働いた：

lengthプロパティを確認し、?を使用してundefinedエラーを回避します。

あなたの例は次のようになります：

<div class="comeBack_up" *ngIf="previous_info?.length">

UPDATE

Lengthプロパティは配列にのみ存在します。質問はオブジェクトに関するものなので、Object.getOwnPropertyNames(obj)を使用してオブジェクトからプロパティの配列を取得します。例は次のようになります。

<div class="comeBack_up" *ngIf="previous_info  && Object.getOwnPropertyNames(previous_info).length > 0">

previous_info &&は、オブジェクトが存在するかどうかを確認するために追加されます。それがtrueと評価されると、次のステートメントは、オブジェクトに少なくともon proportyがあるかどうかをチェックします。プロパティに値があるかどうかはチェックしません。

5
Loke

上記の回答から、以下はうまくいかなかったか、あまり好ましくありませんでした。

  • (previous_info | json) != '{}'は{}空の場合にのみ機能し、nullまたはundefinedの場合には機能しません
  • Objectはテンプレートでアクセスできないため、Object.getOwnPropertyNames(previous_info).lengthも機能しませんでした
  • 専用の変数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および未定義から保護するための流andで便利な方法です。

2
Sumit

少し長い方法（興味がある場合）：

TypeScriptコードでこれを行います。

this.objectLength = Object.keys(this.previous_info).length != 0;

そしてテンプレートで：

ngIf="objectLength != 0"
0
Mukul_Vashistha

読みやすくするために作成されたライブラリ ngx-if-empty-or-has-items は、オブジェクト、セット、マップ、または配列が空でないかどうかをチェックします。たぶんそれは誰かを助けるでしょう。 ngIfと同じ機能を備えています（then、else、および 'as'構文がサポートされています）。

arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it
</h1>

 or 
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}
</h1>

 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it
</h1>
0
alexKhymenko