根据 Angular 中的变量设置 HTML 输入的数量

Question

我正在开发一个航班预订系统，我正在尝试在 HTML 组件中添加输入，规则是输入的数量取决于所选的乘客数量。因此，如果用户选择他想为 5 人预订座位，他将有 5 个输入字段，他必须在其中输入这些乘客的姓名。

我试图根据用户给出的数字使用 innerHTML 进行乘法运算，但这没有用。

现在我有 1 个输入，如下所示：

Passengers data:
    <li><input type="text" [(ngModel)]="passengersData[0]" placeholder="Name and surname"></li>

我也在考虑使用 ngIf 但卡住了。坦率地说，我不知道如何让它发挥作用。感谢您帮助解决这个问题

STACKBLITZ：https://stackblitz.com/edit/flight-date-picker-with-service-done

Answer 1

您基本上需要的是一种使用 ngFor 为指定乘客数重复呈现乘客表单的方法。

您可以在 summary.component.ts:

中创建这样的函数

createRange(number){
  var items: number[] = [];
  for(var i = 1; i <= number; i++){
     items.push(i);
  }
  return items;
}

并将您的模板更新为：

<li *ngFor="let passenger of createRange(showStorage.passengersNumber); let i=index"><input type="text" [(ngModel)]="passengersData[i]" placeholder="Name and surname"></li>

根据 Angular 中的变量设置 HTML 输入的数量

Set number of HTML inputs depending on variable in Angular

javascript

input

dom-manipulation

angular-ng-if

angular