Question

答案已经在这个问题上了："Add More" button for generating dynamic form inputs using ionic framework?对于离子1我正在寻找Ionic 2的解决方案我确实设法让它工作但是第一个输入出现了减号按钮。

Answer 1

假设您在.ts文件中使用数组创建这些动态项目，为什么不在要在第一个实例上隐藏的元素中添加* ngIf？这样的事情会起作用吗？

<div *ngFor="let number of items; let $i = index">
  <!-- content here-->
  <button
    class="button"
    *ngIf="!$i = 1"
    ion-button
    clear
    large
    (click)="remove();">
  </button>
</div>

如果没有你可以做一个ngStyle并应用显示：没有相同的方式或只是修改你的样式不包括第一个按钮。

.button:first-of-type { display: none }

Answer 2

好的，这是另外一种方法，你也可以这样做

首先为动态输入计数创建一个数组..

例如..

myinputs = [];

然后

像这样准备你的模板。

<div *ngFor="let item of myinputs">
<ion-input  [(ngModel)]="item">
</div>
<button ion-button (tap)="addinput()">add input</button>
<button ion-button (tap)="result()">result</button>

现在添加一点addinput动作

addinput(){
// for now you can push empty string
this.myinputs.push("")
}
/// you can simply console out to see the result  
result(){
  console.log('result',this.myinputs)
}

Ionic 2动态表单输入

2 个答案: