angular - 如何使用 ion-col 响应式设置大型动态表数据

Question

这里我面临一个与 ion-col 相关的问题，我将我的动态数据绑定(bind)到 ion - 行并在 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 数据没有正确对齐

Answer 1

您可以使用 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>