时间戳

首页 > 解决方案 > *ngIf 不能在 *ng 内部工作，用于渲染空元素？离子的

angular - *ngIf 不能在 *ng 内部工作，用于渲染空元素？离子的

问题描述

所以我正在尝试开发一个处理不同对象数组的离子应用程序，尽管我知道我正在读取的对象类型（位置、名片等）以及该对象类型必须具有的字段我需要动态添加未知字段，以不同于已知字段的方式处理它们。在我目前正在工作的这种情况下，我只希望显示 card["address"] 的值（稍后我将添加其他内容，这就是我不想这样做的原因 <ion-card-content [class]="key" *ngIf="card['address']">{{card["address"]}} </ion-card-content> 所以，在这个例子中，我想要循环遍历对象卡中的键并显示例如地址的值。

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

我期待的是这样的： 在此处输入图像描述

但是会发生什么：

在此处输入图像描述

空白空间基本上是这样的空div：

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

我的离子信息

离子：

   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

我在做什么错？

标签： angularionic-framework

解决方案

当您这样做时，objectKeys(card)将解析card对象内的每个属性，并且由于card.location为每个键定义，这将显示每个键的空格。

推荐阅读