附加UI元素离子

Posted 2021-04-10

我有一个问题，我不想创建并在应用程序运行时将新的离子元素附加到我的文档中，而不更改当前页面。 i made a illustration to explain 我使用最新版本的离子（3.19.0）

add.html

<ion-content padding>
    <ion-item>
      <ion-label floating>Username</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Password</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
    <ion-icon name="add-circle" (click)="add"></ion-icon>
</ion-content>

add.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-add',
  templateUrl: 'add.html',
})
export class AddPage {
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
}

答案

好的，我找到了解决方案。 你只需要在html元素上创建一个for-binded循环：

例：

add.html

<ion-item *ngFor="let i of inputs">
  <ion-label floating>Data</ion-label>
  <ion-input type="text"></ion-input>
</ion-item>
<ion-icon name="add-circle" (click)="add()"></ion-icon>

add.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-add',
  templateUrl: 'add.html',
})
export class AddPage {
  items = new Array(1);
  constructor(public navCtrl: NavController, public navParams: NavParams) {}
  add() {
    this.items.length += 1;
  }
}

您只需设置列表的长度即可将UI元素添加到文档中