[英]*ngIf not working inside *ngFor rendering empty elems? ionic
所以我正在嘗試開發一個 ionic 應用程序來處理不同的對象數組,盡管我知道我正在閱讀的對象類型(位置、名片等)以及我需要該類型的對象必須具有哪些字段動態添加未知字段,以與已知字段不同的方式處理它們。 在這種情況下,我目前正在工作,我只想顯示 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
我做錯了什么?
當您執行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>
ion-card-content 組件包含一個 card-content-md 類,它包括設置為
padding: 13px 16px;
此填充應用於 *ngFor 循環的每個鍵
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.