[英]ionic grid showing extra column space
我正在嘗試在卡片中顯示上下文。 離子網格功能工作正常,但我不想顯示列表中的第一個元素。 它保留第一個元素的列,盡管它沒有顯示我如何管理空間? 代碼: .ts
first: boolean;
html:
<ion-content>
<ion-searchbar
showCancelButton="focus"
cancelButtonText="Custom Cancel"
></ion-searchbar>
<ion-grid>
<ion-row>
<ion-col
size="12"
size-sm="6"
size-md="4"
size-lg="3"
*ngFor="let item of data; let i = index;first as isFirst;"
>
<ion-card *ngIf="!isFirst">
<ion-card-header>
<ion-card-title class="ion-text-uppercase"
>{{item.B}}</ion-card-title
>
<ion-card-subtitle> Alphabet: {{item.A}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content
>content here
<ion-row class="ion-align-items-center">
<ion-col size="12">first </ion-col>
</ion-row>
<ion-row class="ion-align-items-center ion-margin-top">
<ion-col size="8">
War: {{item.C}}<br />
Brach:{{item.D}}<br />
Highest Rank:{{item.F}}<br />
Service Location: {{item.E}}</ion-col
>
<ion-col size="4">
<ion-button
expand="block"
fill="clear"
shape="round"
color="dark"
>
Details
</ion-button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
如何刪除第一列顯示的空白區域?
我通過使用res.shift()
解決了這個問題:
getRealData(): void {
this.auth
.getAll()
.snapshotChanges()
.pipe(
map((changes) =>
changes.map((c) => ({ key: c.payload.key, ...c.payload.val() }))
)
)
.subscribe((res) => {
res.shift();
this.data = res;
});
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.