私がクリックしたときに行が挿入されていることを、ボタンをクリックしますtypescriptです

Question

使用してイオン2にdynamicaly行を追加します。typescriptです側

<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 
} 

あなたが任意の例を知っていますかイオン2とタイスクリプトを使用して？

Answer 1

アレイを使用して動的に行を追加できます。 this 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' }); 
    } 
}