javascript - Ako skontrolovať prázdny objekt v šablóne Angular 2 pomocou *ngIf

Chcem skontrolovať, či je môj objekt prázdny, neprvky renderovať a toto je môj kód:

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

ale môj kód je nesprávny, aký je najlepší spôsob, ako to urobiť?

Odpoveď č. 1

Toto by malo urobiť to, čo chceš:

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

alebo kratší

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

Každý {} vytvára novú inštanciu a porovnanie ==== rôznych inštancií objektov vždy vedie k false. Keď sa prevedú na reťazce, === vedie k true

Príklad Plunker

Odpoveď č. 2

Z vyššie uvedených odpovedí nasledovné nefungovalo alebo bolo menej preferované:

  • (previous_info | json) != '{}' funguje iba pre prázdny prípad {}, nie pre null alebo undefined.
  • Object.getOwnPropertyNames(previous_info).length tiež nefungovalo, pretože Object nie je v šablóne prístupný
  • Nechcel by som vytvárať samostatnú premennú this.objectLength=Object.keys(this.previous_info).length !=0;

  • Nepáčilo by sa mi vytvárať vyhradenú funkciu

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

Riešenie: keyvalue pipe spolu s ?. (bezpečnostný operátor navigácie); a zdá sa to jednoduché.

Funguje dobre, keď previous_info=null alebo previous_info=undefined alebo previous_info={} a považuje sa to za nepravdivú hodnotu.

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

keyvalue - Transformuje objekt alebo mapu na pole párov kľúč-hodnota.

?. - Operátor bezpečnej navigácie Angular (?.) je plynulý a pohodlný spôsob, ako sa chrániť pred hodnotami null a undefined

DEMO: demo s Angular 9, hoci funguje aj pre predchádzajúce verzie

Odpoveď č. 3

Mohli by ste použiť aj niečo takéto:

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

s metódou isEmptyObject definovanou vo vašej komponente:

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

Odpoveď č. 4

Predchádzajúce odpovede sú v poriadku. Ale našiel som naozaj peknú možnosť, ako použiť nasledovné vo view:

{{previous_info?.title}}

pravdepodobne duplicitná otázka Angular2 - chyba, ak nezistíte, či {{object.field}} existuje

Súvisiace články