Question

我希望在ionic2中动态生成网格列，我在.html文件中编写了以下代码

    <ion-content padding>
  <ion-grid>
    <ion-row text-center>
      <ion-col *ngFor="let name of grid;" 
                  [value]="grid">{{name.grid}}</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

并在.ts文件中

 grid = [
 {
   grid: 'CSE',
 },
 {
   grid: 'I.T',
 }];         

   selectedGrid = this.grid[0];

但它不起作用应该做什么？

Answer 1

我用这是我的代码，希望它有帮助

 <ion-row >
      <ion-col col-1 class="heading">
        <div> S/N</div>
      </ion-col>
      <ion-col col-4 class="heading">
        <div>Description</div>
      </ion-col>
        <ion-col col-1 class="heading">
        <div>QTY</div>
      </ion-col>
        <ion-col col-3 class="heading">
        <div>Unit Price (NGN)</div>
      </ion-col>
      <ion-col col-3 class="heading">
        <div>Value (NGN)</div>
      </ion-col>
</ion-row>


 <ion-row *ngFor="let item of items">
      <ion-col col-1 >
        <div> {{item.id}} </div>
      </ion-col>
      <ion-col col-4 >
        <div>{{item.description}}</div>
      </ion-col>
        <ion-col col-1 class="qty" >
        <div>{{item.qty}}</div>
      </ion-col>
     <ion-col col-3  class="value">
        <div>{{item.unit_price}}</div>
      </ion-col>
      <ion-col col-3   class="value">
        <div>{{item.amount}}</div>
      </ion-col>
</ion-row>

如何在ionic2中动态添加网格中的列？

1 个答案: