*ngIf not working inside *ngFor rendering empty elems? ionic

Question

So I'm trying to develop an ionic app that will handle different arrays of objects, and although I know the type of object I'm reading (location, business card, etc) and which fields that type of object must have I will need to add dynamically the unknown fields to process them differently from the know fields. In this case that I'm currently working, I only want the value of the card["address"] to show up (later I will add other things that's why I don't want to do <ion-card-content [class]="key" *ngIf="card['address']">{{card["address"]}} </ion-card-content> So, in this example, I want to loop through the keys in the object card and show for instance, the value of address.

<ion-content padding *ngIf="cards.length > 0;">
    <ion-list no-border>
      <ion-item ion-item *ngFor="let card of cards" style="margin-bottom: 0px;">
        <ion-card color="#3E4D5C" class="card" style="margin-bottom: 0px;">
          <div  *ngIf="card.location;" style="height:175px; width: 100%" [id]="'map_canvas'+card['pos']"></div>
          <img  *ngIf="card.EMAIL;" [src]="card.IMG" style="width: 100%;height: auto;max-height:20%;object-fit: cover;">
          <ion-card-content *ngFor="let key of objectKeys(card)">
              <ion-card-content *ngIf="card.location;">
                  <ion-card-content [class]="key" *ngIf="key === 'address'">{{card[key]}} </ion-card-content>    
              </ion-card-content>
          </ion-card-content>

What I'm expecting is something like this:

But what happens is this:

Where the empty space is basically empty divs like this:

<ion-card-content _ngcontent-ulj-c1="" class="md card-content-md hydrated" __plugindomid="pgm1300845537375"><!--bindings={
  "ng-reflect-ng-if": "\u000047,5"
}--><ion-card-content _ngcontent-ulj-c1="" class="md card-content-md hydrated" __plugindomid="pgm291174209756"><!--bindings={}--></ion-card-content></ion-card-content>

My ionic info

Ionic:

   Ionic CLI                     : 5.4.13 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.21
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

What I'm i doing wrong?

Answer 1

当您执行objectKeys(card)这将解析card对象内的每个属性，并且因为card.location是为每个键定义的，因此每个键都会显示空白。

Answer 2

<ion-content padding *ngIf="cards.length > 0;">
    <ion-list no-border>
      <ion-item ion-item *ngFor="let card of cards" style="margin-bottom: 0px;">
        <ion-card color="#3E4D5C" class="card" style="margin-bottom: 0px;">
          <div  *ngIf="card.location;" style="height:175px; width: 100%" [id]="'map_canvas'+card['pos']"></div>
          <img  *ngIf="card.EMAIL;" [src]="card.IMG" style="width: 100%;height: auto;max-height:20%;object-fit: cover;">
              <ion-card-content *ngIf="card.location;">
                  <ion-card-content [class]="key" *ngIf="key === 'address'">{{card[key]}} 
              </ion-card-content>
          </ion-card-content>

Answer 3

The ion-card-content component contains a card-content-md class which includes padding set to

 padding: 13px 16px;

This padding is being applied to each key the *ngFor loops over