Angular 如何从迭代数组的用户处读取输入

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

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

---

Stack Blitz Link

虽然这不是一种角度的方法，但您可以使用ElemenRef查询所有输入

构造函数私有elRef:ElementRef{} 提交函数{ const list:NodeList=this.elRef.nativeElement.queryselectoralinput； list.forEachel:HTMLInputElement，idx=>{ console.log`el${idx}:${el.value}`； }; } 这是一张工作票

---

但是你一定要看看

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

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

---

我猜它是未定义的？

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

---

我还在这里更新了您的代码

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

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

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

在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语法是什么，但似乎有效。这是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>

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

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

---

希望它能帮助你

请查看以下答案：。我投了反对票，因为我认为你还没有读过任何关于ngOnInit的文件{this.arrayElements=[listlementone，listlementtwo，listlementthree，listlementfour，listlementfive，listlementsix]}我正在定义一个列表，请看代码