wake-up-neo.com

So prüfen Sie ein leeres Objekt in der Vorlage "Winkel 2" mit * ngIf

Ich möchte prüfen, ob mein Objekt leer ist, rendere mein Element nicht und das ist mein Code:

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

mein Code ist jedoch falsch. Wie kann ich das am besten tun?

javascripttypescriptangular
29
Alireza Valizade

Dies sollte tun, was Sie wollen:

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

oder kürzer

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

Jeder {} erstellt eine neue Instanz und der ====-Vergleich verschiedener Objektinstanzen führt immer zu false. Wenn sie in Strings konvertiert werden, === Ergebnisse in true

Plunker-Beispiel

68
Günter Zöchbauer

Sie könnten auch so etwas verwenden:

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

mit der in Ihrer Komponente definierten isEmptyObject-Methode:

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

Die obigen Antworten sind in Ordnung. Ich habe jedoch eine wirklich schöne Option gefunden, um Folgendes in der Ansicht zu verwenden:

{{previous_info? .title}}

wahrscheinlich doppelte frage Angular2 - Fehler, wenn nicht überprüft wird, ob {{object.field}} vorhanden ist

10
Damiani

Das hat für mich funktioniert:

Überprüfen Sie die length-Eigenschaft und verwenden Sie ?, um undefined-Fehler zu vermeiden.

Ihr Beispiel wäre also:

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

UPDATE

Die length-Eigenschaft ist nur für Arrays vorhanden. Da es sich bei der Frage um Objekte handelt, verwenden Sie Object.getOwnPropertyNames(obj), um ein Array von Eigenschaften vom Objekt abzurufen. Das Beispiel wird:

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

Der previous_info && wird hinzugefügt, um zu überprüfen, ob das Objekt vorhanden ist. Wenn es zu true ausgewertet wird, prüft die nächste Anweisung, ob das Objekt mindestens eine Proportion hat. Es wird nicht geprüft, ob die Eigenschaft einen Wert hat.

3
Loke

Aus den obigen Antworten ging Folgendes hervor:

  • (previous_info | json) != '{}' Funktioniert nur für leere Groß-/Kleinschreibung {}, Nicht für Groß-/Kleinschreibung null oder undefined
  • Object.getOwnPropertyNames(previous_info).length hat auch nicht funktioniert, da Object in der Vorlage nicht verfügbar ist
  • Ich möchte keine dedizierte Variable erstellen this.objectLength = Object.keys(this.previous_info).length !=0;

  • Ich möchte keine dedizierte Funktion erstellen

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

Lösung: Schlüsselwert Pipe zusammen mit ?. (sicherer Navigationsoperator); und es scheint einfach.

Es funktioniert gut, wenn previous_info = null Oder previous_info = undefined Oder previous_info = {} Und als falscher Wert behandelt wird.

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

Schlüsselwert - Wandelt Objekt oder Map in ein Array von Schlüsselwertpaaren um.

?. - Der Operator Angular= safe navigation operator (?.) Ist eine fließende und bequeme Möglichkeit, sich vor Null und Undefiniertem zu schützen

2
Sumit

Ein etwas längerer Weg (falls interessiert):

Führen Sie in Ihrem TypeScript-Code Folgendes aus:

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

Dann in der HTML-Datei prüfen:

* ngIf = "objectLength! = 0

0
Mukul_Vashistha

Nur für die Lesbarkeit erstellte Bibliothek ngx-if-empty-or-has-items prüft, ob ein Objekt, ein Satz, eine Map oder ein Array nicht leer ist. Vielleicht hilft es jemandem. Es hat die gleiche Funktionalität wie ngIf (dann wird else and 'as' -Syntax unterstützt).

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