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

  }

Stack Blitz Link 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}}">

在Submit函数中，按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中，我们可以定义一个输入更改方法，该方法会将输入值分配给键为元素名称的结果。在Submit方法中，我们过滤结果并返回结果列表。

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

希望它对您有所帮助！

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

5 个答案: