离子网格显示额外的列空间

Question

我正在尝试在卡片中显示上下文。 离子网格功能工作正常，但我不想显示列表中的第一个元素。 它保留第一个元素的列，尽管它没有显示我如何管理空间？ 代码： .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>

如何删除第一列显示的空白区域？

Answer 1

我通过使用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;
      });
  }
}