Html Ionic 3-单击按钮时动态添加行

我想在单击按钮时添加新行

<button ion-button large full color="dark" (click)="onClickNewRow()">New Row</button>

这就是我想添加的行

    <ion-row>
      <ion-col col-12>
        Compétences recherchées
        <ion-list>
          <ion-item>
            <ion-label>Compétence</ion-label>
            <ion-select [(ngModel)]="Competences">
              <ion-option value="informatique">Informatique</ion-option>
              <ion-option value="jardinnage">Jardinnage</ion-option>
              <ion-option value="impression3D">Impression 3D</ion-option>
              <ion-option value="menuiserie">Menuiserie</ion-option>
              <ion-option value="secouriste">Secouriste</ion-option>
              <ion-option value="montagevideo">Montage Video</ion-option>
              <ion-option value="excel">Excel</ion-option>
              <ion-option value="word">Word</ion-option>
              <ion-option value="sharepoint">Sharepoint</ion-option>
              <ion-option value="soudeur">Soudeur</ion-option>
            </ion-select>
          </ion-item>
        </ion-list>
      </ion-col>           
    </ion-row>

我不知道如何继续。有人能帮我吗？我应该在我的函数onClickNewRow中写什么？ 我使用的是爱奥尼亚3，所以是打字脚本和HTML

<ion-col col-12>
        Compétences recherchées
        <ion-list>
          <ion-item>
            <ion-label>Compétence</ion-label>
            <ion-select [(ngModel)]="Competences">
              <ion-option *ngFor = 'eachValue of values' value=eachValue >{{eachValue }}</ion-option>
            </ion-select>
          </ion-item>
        </ion-list>
      </ion-col>           
    </ion-row

---

查看Stackblitz上的应用程序功能-

- input-row.component.html

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-input-row',
  templateUrl: './input-row.component.html',
  styleUrls: ['./input-row.component.css']
})
export class InputRowComponent implements OnInit {
  @Input() data: any
  @Output() onDelete = new EventEmitter<any>();
  constructor() {
  }

  ngOnInit() {
    this.data.id = new Date().getTime()
  }

  deleteClicked() {
    console.log("deleteClicked")
    this.onDelete.next(this.data)
  }
}

- input-row.component.ts

---

查看Stackblitz上的应用程序功能-

- input-row.component.html

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-input-row',
  templateUrl: './input-row.component.html',
  styleUrls: ['./input-row.component.css']
})
export class InputRowComponent implements OnInit {
  @Input() data: any
  @Output() onDelete = new EventEmitter<any>();
  constructor() {
  }

  ngOnInit() {
    this.data.id = new Date().getTime()
  }

  deleteClicked() {
    console.log("deleteClicked")
    this.onDelete.next(this.data)
  }
}

- input-row.component.ts

---

哦，对不起，我想我解释错了。当我点击按钮时，我想添加与我描述的相同的内容。视觉上，我想添加一个新的类似离子选择。事实上，我想做一个与图片上的wich类似的函数。当用户点击“添加电话”按钮时，界面上会出现一个输入另一个电话号码的新行哦，对不起，我想我解释错了。当我点击按钮时，我想添加与我描述的相同的内容。视觉上，我想添加一个新的类似离子选择。事实上，我想做一个与图片上的wich类似的函数。当用户点击“添加电话”按钮时，界面上会出现一个输入另一个电话号码的新行，我想我解释错了。当我点击按钮时，我想添加与我描述的相同的内容。视觉上，我想添加一个新的类似离子选择。事实上，我想做一个与图片上的wich类似的函数。当用户点击“添加电话”按钮时，界面上会出现一个输入另一个电话号码的新行，我想我解释错了。当我点击按钮时，我想添加与我描述的相同的内容。视觉上，我想添加一个新的类似离子选择。事实上，我想做一个与图片上的wich类似的函数。当用户点击“添加电话”按钮时，界面上会出现一个新的行，用于输入另一个电话号码。非常感谢，工作正常！这比我预期的要多，非常好：谢谢你，这很有效！这比我想象的要多，非常好：D

// home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { InputRowComponent } from './input-row/input-row.component'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  inputRowValue = [{}]
  constructor(public navCtrl: NavController) {}

  addRow() {
    this.inputRowValue.push({})
  }

  onDelete(_event) {
    console.log(_event)
    this.inputRowValue = this.inputRowValue.filter((i: any) => i.id !== _event.id)
  }

}

<ion-item-sliding>
    <ion-item>
        <ion-label>Compétence {{index}}</ion-label>
        <ion-select [(ngModel)]="data.value">
            <ion-option value="informatique">Informatique</ion-option>
            <ion-option value="jardinnage">Jardinnage</ion-option>
            <ion-option value="impression3D">Impression 3D</ion-option>
            <ion-option value="menuiserie">Menuiserie</ion-option>
            <ion-option value="secouriste">Secouriste</ion-option>
            <ion-option value="montagevideo">Montage Video</ion-option>
            <ion-option value="excel">Excel</ion-option>
            <ion-option value="word">Word</ion-option>
            <ion-option value="sharepoint">Sharepoint</ion-option>
            <ion-option value="soudeur">Soudeur</ion-option>
        </ion-select>

    </ion-item>
    <ion-item-options side="right">
      <button ion-button color="danger"  (click)="deleteClicked(item)">DELETE</button>
    </ion-item-options>
</ion-item-sliding>

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-input-row',
  templateUrl: './input-row.component.html',
  styleUrls: ['./input-row.component.css']
})
export class InputRowComponent implements OnInit {
  @Input() data: any
  @Output() onDelete = new EventEmitter<any>();
  constructor() {
  }

  ngOnInit() {
    this.data.id = new Date().getTime()
  }

  deleteClicked() {
    console.log("deleteClicked")
    this.onDelete.next(this.data)
  }
}