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

<!-- 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}} </pre>
</ion-content>

--

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