Как прочитать ввод от пользователя, который перебирает массив

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

  }

Стек Blitz Link ссылка для редактирования

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

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

Надеюсь, это поможет вам!

Answer 3

Назначение уникальных идентификаторов для каждого поля ввода.

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

Кажется, работает, хотя я понятия не имею, что это за синтаксис "arrayItems" в app.component.html

Answer 4

Можете ли вы дать нам немного больше информации здесь, каков ответ на вопрос

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

Я предполагаю, что он не определен?

Answer 5

Хотя это не угловой способ сделать это, вы можете использовать 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}`);
  });
}

вот рабочая демка

но вы обязательно должны взглянуть на ReactiveForms