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

Question

我有一个离子选择，它在离子选项中有 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>

如果离子选项 == 0，我需要隐藏所有输入框，并根据在 n 个离子选择中选择的数量显示输入框。

这意味着如果离子选择4，则仅显示4个输入框。

谢谢

Answer 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[] 数组的输入数。

对于显示，您可以在table或div或ng-container中循环播放它们。因此，每次您都会为该框输入一个值。

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