Question

我想点击一个按钮，当点击一行时插入一行：

  <ion-grid>
    <ion-row>
      <ion-col>
        1 of 2
      </ion-col>
      <ion-col>
        2 of 2
      </ion-col>
    </ion-row>
  </ion-grid>
  <button (click)="addrow"></button>

在打字稿方面：

addrow(){
//code
}

你知道使用ionic 2和typescript的任何例子吗？

Answer 1

您可以使用数组动态添加行。请看this plunker。请注意，在plunker中我还使用maxQuantity属性来禁用按钮（并避免将新行添加到网格中）。

观点：

<ion-header>
  <ion-navbar>
    <ion-title>Ionic Demo</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-grid>
    <ion-row *ngFor="let row of rows">
      <ion-col>
        {{ row?.firstCol }}
      </ion-col>
      <ion-col>
        {{ row?.secondCol }}
      </ion-col>
    </ion-row>
  </ion-grid>
  <button ion-button [disabled]="rows?.length === maxQuantity" (click)="addrow()">Add a row</button>

</ion-content>

组件：

@Component({...})
export class HomePage {

  public rows: Array<{ firstCol: string, secondCol: string }> = [];
  private maxQuantity: number = 5;

  constructor() {}

  public addrow(): void {
    this.rows.push({ firstCol: '1 of 2', secondCol: '2 of 2' });
  }
}

使用typescript在Ionic 2上添加动态动态行

1 个答案: