I am trying to display the context in cards. The ionic grid function is working fine but I don't want to display first element from the list. It keeps the column for first element although it is not displaying how do I manage the space ? code: .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>
How do I remove the blank space that is shown for first column ?
I solved the issue by using 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;
});
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.