[英]*ngIf not working inside *ngFor rendering empty elems? ionic
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.所以我正在尝试开发一个 ionic 应用程序来处理不同的对象数组,尽管我知道我正在阅读的对象类型(位置、名片等)以及我需要该类型的对象必须具有哪些字段动态添加未知字段,以与已知字段不同的方式处理它们。 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.在这种情况下,我目前正在工作,我只想显示 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>
What I'm expecting is something like this:我期待的是这样的:
But what happens is this:但发生的事情是这样的:
Where the empty space is basically empty divs like this:那里的空白空间基本上是这样的空 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>
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?我做错了什么?
当您执行objectKeys(card)
这将解析card
对象内的每个属性,并且因为card.location
是为每个键定义的,因此每个键都会显示空白。
<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>
The ion-card-content component contains a card-content-md class which includes padding set to ion-card-content 组件包含一个 card-content-md 类,它包括设置为
padding: 13px 16px;
This padding is being applied to each key the *ngFor loops over此填充应用于 *ngFor 循环的每个键
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.