Ionic 3 - Добавление строк динамически при нажатии на кнопку

Question

Я хочу добавить новую строку, когда нажимаю на кнопку.

<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"?Я использую Ionic 3, поэтому TypeScript и HTML

Answer 1

См. Приложение, работающее здесь, на Stackblitz - https://stackblitz.com/edit/ionic-52yybh

<code><!-- home.html -->
<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <h2>Welcome to Ionic!</h2>

    <button ion-button (click)="addRow()">Add</button>
  <ion-list>
    <div *ngFor="let i of inputRowValue; let ii=index"  style="font-size:smaller">
      <app-input-row [data]="i" (onDelete)="onDelete($event)"></app-input-row>
    </div>
  </ion-list>

  <pre> {{inputRowValue | json}} 

-

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

}

- input-row.component.html

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

- input-row.component.ts

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

Answer 2

<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

в вашем .ts создайте массив со всеми значениями

values = ['Informatique', 'Jardinnage', 'Impression ', etc]

, затем на clickEvent нажмите newvalue в массив

onClickNewRow(newValue: string) {
values.push(newValue);
}