如何在离子选择的数字值上显示/隐藏多个离子输入？

【问题标题】：How to display/hide multiple ion-input on the value of number from ion-select?如何在离子选择的数字值上显示/隐藏多个离子输入？
【发布时间】：2018-01-29 16:50:32
【问题描述】：

我有一个离子选择器，它在离子选项中有 1 到 10 个值。

<ion-label> Select how many input fields</ion-label>
<ion-select> 
<ion-option value="0"> Zero</ion-option>
<ion-option value="1"> One</ion-option>
.
.
.
<ion-option value="10"> Ten</ion-option>
 </ion-select>

之后我有 10 个输入框要显示。

<ion-input formControlName="1_box"></ion-input>
..
.
.
.<ion-input formControlName="10_box"></ion-input>

如果ion-option == 0，我需要隐藏所有输入框，并根据n ion-select中选择的数量显示输入框。

表示离子选择4时只显示4个输入框。

谢谢

【问题讨论】：

标签： javascript ionic-framework ionic2

【解决方案1】：

你可以创建一个像boxes = [];这样的输入数组并放置一个

<ion-select (cancel)="onCancel()" (change)="onChange()">
  <ion-option value="1">One</ion-option>
  <ion-option value="2">Two</ion-option>
  <ion-option value="3">Three</ion-option> 
</ion-select>

转到ion-select。每次更改时，请检查值并增加或减少来自 boxes[] 数组的输入数量。

对于 Display，您可以在 table 或 div 或 ng-container 中循环它们。所以每次你都会为这个框输入一个值。

<div *ngFor="let box in boxes"> <input [(ngModel)]="box" /> </div>

【讨论】：