简体   繁体   中英

ionic grid showing extra column space

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM