angular – 如何使用ion-col设置大型动态表格数据

在这里我面临着一个与ion-col相关的问题,我将我的动态数据绑定到离子行并在离子列中显示数据,这里表格很大,它正在切断,下面不稳定的宽度是我的鳕鱼

<ion-grid class="contnr">
      <ion-row style="" class="grid-head">
        <ion-col width-40>
          Transaction
        </ion-col>
        <ion-col width-40>
          Count
        </ion-col>
        <ion-col width-40 >
         Overall  Gross Amount
        </ion-col>
        <ion-col width-40 >
          Overall disc
        </ion-col>
        <ion-col  width-40>
          Overall Tax
        </ion-col >
        <ion-col  width-40>
         Overall ServiceTax
        </ion-col>
        <ion-col  width-40>
         Overall Charge
        </ion-col>
        <ion-col  width-40>
          Overall Net
        </ion-col>
      </ion-row>
      <ion-row *ngFor="let value of resultData" style="background:#eff0f1" class="cont-rows">

        <ion-col width-40>
          {{value.TransacType}}
        </ion-col>
        <ion-col width-40>
          {{value.Transactions}}
        </ion-col>
        <ion-col width-40>
          {{value.Count}}
        </ion-col>
        <ion-col width-40>
          {{value.OverallSales}}
        </ion-col>
        <ion-col width-40>
          {{value.discount}}
        </ion-col>
        <ion-col width-40>
          {{value.OverallTax}}
        </ion-col>
        <ion-col width-40>
          {{value.MandatoryTax}}
        </ion-col>
        <ion-col width-40>
          {{value.ServiceCharge}}
        </ion-col>
        <ion-col width-40>
          {{value.NetAmt}}
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          Total
        </ion-col>

        <ion-col>
          {{grosstotal}}
        </ion-col>
        <ion-col>
          {{Nets}}
        </ion-col>

      </ion-row>
    </ion-grid>

这里的问题表是如此之长,以至于它正在切断,即使我使用scss设置但col和col数据没有正确对齐

您可以使用 Responsive attributes轻松完成.

stackblitz

To customize a column’s width for all devices and screens,add the
col-* attribute. These attributes tell the column to take up * columns
out of the available columns.

<ion-grid>
  <ion-row>
    <ion-col col-4>
      1 of 4
    </ion-col>
    <ion-col col-2>
      2 of 4
    </ion-col>
    <ion-col col-2>
      3 of 4
    </ion-col>
    <ion-col col-4>
      4 of 4
    </ion-col>
  </ion-row>
</ion-grid>

您也可以根据screen breakpoints显示/隐藏列.

注意：这里它隐藏了md断点上的所有列.

stackblitz

.scss

@media (min-width: 768px) and (max-width:991px) {
  .hidden-md {
    display: none;
  }
}

html的

<ion-grid>
        <ion-row>
            <ion-col col-6 class="hidden-md">
                1 of 4
            </ion-col>
            <ion-col col-6 class="hidden-md">
                2 of 4
            </ion-col>
        </ion-row>
    </ion-grid>