离子 - 如何像复选框一样做矩阵

时间:2017-10-24 11:41:14

标签: html angular ionic-framework

如何显示多个复选框以显示如下?

          Col1    Col2    Col3
Row 1     []      []       []
Row 2     []      []       []

<div *ngFor="let row of item.rows">
  <ion-item>
    <div *ngFor="let col of item.columns">
      <ion-label>{{row}}</ion-label>
      <ion-label>{{col}}</ion-label>
      <ion-checkbox [id]="item.id"></ion-checkbox>
    </div>
  </ion-item>
</div>

1 个答案:

答案 0 :(得分:0)

HTML:

<ion-grid>
  <ion-row *ngFor="let rows of matrix.row; let i=index ">
    <ion-label>
      {{rows}}
    </ion-label>
    <ion-col *ngFor="let cols of matrix.column">
    <ion-label *ngIf="i==0">{{cols}}</ion-label>
      <ion-checkbox [id]="matrix.id"></ion-checkbox>
    </ion-col>
  </ion-row>
</ion-grid>

组件文件:

matrix:any={
        column :['col1','col2','col3'],
        row : ['row1','row2'],
        title: 'test',
        id:1
    }