如何动态生成X数量的新<输入>基于a<选择>(Angular2内）

How to dynamically generate X amount of new <input> based on the value of a <select> (within Angular2)?

本文关键字：gt lt 输入 Angular2 基于 选择 动态 何动态      更新时间：2023-09-26

我会尽量让它变得简单。

问题：

我有一个页面，我需要根据<select>中选择的值生成X个<input>标签。

堆栈/技术：Angular2/Javascript

示例：

下拉列表询问："你有多少个孩子？"

如果用户在<select>下拉列表中选择3，则会生成总共3个<input>字段，并将其插入问题后的<div>中。

我尝试过的：

我已经成功地完成了，但它是半不可靠的，我觉得这不是"正确"的做事方式。

故障1:

我尝试将*ngFor与传统的for循环逻辑一起使用。我刚刚做了这样的事：

for(let i = 0; i < selectValue; i++)

它不喜欢那样。显然，*ngFor主要用于遍历数组和对象，不能与传统的for逻辑一起使用。

故障2:

我尝试预生成一个对象数组、一个多维数组和一个JSON样式的对象，其中包含空的但预先填充的字段。

我的目标是在一个数组中生成X个对象，其中X对应于用户选择的select编号。然后，*ngFor可以遍历这个"预先填充"的数组，显示输入，然后我会填充该对象，以便稍后通过HTTP发送。

基本上，当<select>发生变化时，它会调用一个函数，同时传递用户选择的号码。该函数将生成一个包含X个对象的新数组。

不知道为什么这不起作用。

成功（但并不理想）：

我尝试绑定[innerHTML] = generatedHTML，然后用传统的Javascript填充生成的HTML变量。这使得<input>看起来运行良好，但这似乎是一种可怕的方式。此外，我需要在每个新的<input>上创建事件绑定器，如果我以如此糟糕的方式插入[innerHTML]，我不确定手动插入的[innerHTML]是否能在Angular2的区域内正常工作。

奖金问题

添加输入后，我希望以最简单、最完整的方式访问它们的值。是否可以将多个数据输入添加到ONE ngModel中，然后通过迭代访问每个单独的输入？还是我需要找到另一种方法来做到这一点？我可以把所有这些输入放在一个<form>下，然后把那个<form>绑定到一个数据模型上吗？

谢谢大家的帮助！Angular 2非常新，但到目前为止已经挖掘了很多：）

我会这样做：

  1. 为您的选择指定ng更改功能
  2. 处理该函数中select的ng模型绑定值（以创建一个具有n个元素的新数组）
  3. 将以后需要的任何信息添加到每个inputArray元素以装饰输入框
  4. 在该数组上重复ng以创建您的输入

HTML:

<select [(ngModel)]="number" (ngModelChange)="nrChanged()">
  <option *ngFor="let nr of numbers" [value]="nr">{{nr}}</option>
</select>
<input *ngFor="let inputInfo of inputArr" type="text" placeholder="text" />

组件：

private numbers = [1,2,3,4,5,6,7];
private number;
private inputArr = [];
 nrChanged()
 {
  this.inputArr = [];
  for(var i = 0; i < this.number; i++){
      /*here you can assign any information you need for creating the concrete input */
      this.inputArr[i] = {neededInfo: 'I am the ' + i + 'Element'};
  }
相关文章：