如何读取用户的输入，这些输入是在数组上迭代的

Question

i有一个列表，该列表在数组上迭代，其中有一个输入标签如何在单击"按钮"按钮中从文本框中读取值列表

<div>
  <div *ngFor="let arrayitems of arrayElements">
    <P>{{arrayitems}}</P>
    <input type ="text" placeholder="{{arrayitems}}">
  </div>
  <button (click)="submitFunction()" style="margin-top:10px">CLICK ME!</button>
</div>

打字稿：

 arrayElements : any;
  ngOnInit(){
    this.arrayElements=["listElementOne","listElementTwo","listElementThree","listElementFour","listElementFive","listElementSix"];
  }
  submitFunction(){
    alert("Function Called");
    console.log("print all the values taken from the input tag");
  }

堆栈Blitz链接链接到编辑

Answer 1

您需要将值存储在单独的数组中，然后使用ngmodel绑定值。

以下是更新的app.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  arrayElements : any;
  items: string[] = [];
  ngOnInit(){
    this.arrayElements=["listElementOne","listElementTwo","listElementThree","listElementFour","listElementFive","listElementSix"];
  }
  submitFunction(){
    console.log(this.items);
  }
}

和app.component.html

<div>
  <div *ngFor="let arrayitems of arrayElements;let i = index;">
    <P>{{arrayitems}}</P>
    <input type ="text" [(ngModel)]="items[i]" placeholder="{{arrayitems}}">
  </div>
  <button (click)="submitFunction()" style="margin-top:10px">CLICK ME!</button>
</div>

我还在此处更新了您的代码https://stackblitz.com/edit/input-tag-iterating-iterating-over-aray-aray-2fezah

Answer 2

，尽管这不是角度的方式，但您可以使用ElemenRef查询所有输入。

constructor(private elRef: ElementRef) { }
submitFunction() {
  const list: NodeList = this.elRef.nativeElement.querySelectorAll("input");
  list.forEach((el: HTMLInputElement, idx) => {
    console.log(`el${idx}: ${el.value}`);
  });
}

这是一个工作演示

，但您绝对应该看看反应性

Answer 3

您可以在这里给我们更多信息，您在

上得到的响应是什么

<P>{{arrayitems}}</P>.

我猜它没有分歧？

Answer 4

为每个输入字段分配唯一的ID。

<input type ="text" id={{arrayitems}} placeholder="{{arrayitems}}">

在提交功能中，查找ID元素，并从"值"属性中读取其内容。

for (const elementId of this.arrayElements) {
    const element = <HTMLInputElement>document.getElementById(elementId)
    const content = element.value
    console.log(content)
}

似乎有效，尽管我不知道app.component.html

Answer 5

这是app.component.html，我在其中为输入字段添加了新的更改方法。

<div>
  <div *ngFor="let arrayitems of arrayElements">
    <P>{{arrayitems}}</P>
    <input type ="text" (change)="inputChange($event, arrayitems)" 
           placeholder="{{arrayitems}}">
  </div>
  <button (click)="submitFunction()" style="margin-top:10px">CLICK ME! 
  </button>
</div>

在app.component.ts中，我们可以定义输入更改方法，该方法将输入值分配给键是元素名称的结果。在提交方法中，我们过滤结果并返回列表o结果。

export class AppComponent implements OnInit  {
  arrayElements : any;
  result = {};
  ngOnInit(){
    this.arrayElements= ["listElementOne","listElementTwo","listElementThree","listElementFour","listElementFive","listElementSix"];
  }
  inputChange(e, itemName) {
    this.result[itemName] = e.target.value
  }
   submitFunction(){
    const submitResult = this.arrayElements.map(element => {
      if (this.result[element]) {
        return this.result[element];
      }
    })
    .filter(e => !!e)
    console.log(submitResult)
    alert("Function Called");
  }
}

希望它能帮助您！