如何读取遍历数组的用户输入

Question

我有一个遍历数组的列表，其中有一个输入标签如何在单击按钮后从文本框中读取值，其中输入框是根据列表的长度生成的

<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");

  }

堆栈闪电战 Link link to edit

Answer 1

虽然这不是 angular 执行此操作的方法，但您可以使用 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}`);
  });
}

这是一个有效的 demo

但你绝对应该看看 ReactiveForms

Answer 2

你能在这里给我们更多的信息吗，你在

得到的回应是什么？

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

我猜它是未定义的？

Answer 3

您需要将值存储在单独的数组中，然后使用 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-over-array-2fezah

Answer 4

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

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

在提交函数中通过 id 查找元素并从 "value" 属性.

中读取它们的内容

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

似乎可行，但我不知道 "arrayItems" 语法在 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中我们可以定义一个输入更改方法，它将输入值分配给结果，其中键是元素名称。在提交方法中，我们过滤结果和 return 结果列表。

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");
  }
}

希望对您有所帮助！

如何读取遍历数组的用户输入

How to read the input from the user which is iterating over array

loops

typescript

angular-ngmodel

angular