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

Question

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

我试图根据用户给出的数字将 innerHTML 与乘法一起使用，但这不起作用。

目前我有 1 个输入，如下所示：

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

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

堆栈闪电战：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>