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

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>

TypeScript：

 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 to edit

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-over-array-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}`);
  });
}

这是一个有效的demo

但你一定要看看ReactiveForms

Answer 3

你能在这里给我们更多的信息吗，你得到的回应是什么

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

我猜它是未定义的？

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

似乎有效，但我不知道 app.component.html 中的“arrayItems”语法是什么

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 中，我们可以定义一个输入更改方法，它将输入值分配给结果，其中键是元素名称。在提交方法中，我们过滤结果并返回结果列表。

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

希望对你有所帮助！