получить значение, равное одному элементу ngFor, который ввел значение

Question

Я много пробовал, но у меня нет идей.

У меня следующий код

HTML:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  array = [{id: 1}, {id: 2},{id: 3}]
value: string;
  printValue(value: any){
    console.log(value);
    var containputiner = document.querySelector("#"+value);
    this.value = containputiner.value;
    console.log(this.value);
  }
}

TS:

<div *ngFor="let item of array">
  <input id="id_{{item.id}}" />
  <button type="button" (click)="printValue('id_'+item.id)"> button {{item.id}}</button>
  <div>{{value}}</div>
</div>

Я хочу, чтобы {{значение}} заполнялось только для каждого поля ввода. Я не хочу, чтобы всегда одно и то же значение при вводе ЛЮБОГО поля ввода, сохраненного в этой переменной. Поле ввода 1 должно заполнять {{value}} 1, поле ввода 2 должно заполнять {{value}} 2

Может ли кто-нибудь мне помочь?

https://dynamic-input-id-zgqzgi.stackblitz.io/

Answer 1

app.component.ts

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  
  array = [
    {
      id: 1, 
      value: ''
    }, 
    {
      id: 2,
      value: ''
    },
    {
      id: 3,
      value: ''
    }
  ]

  printValue(id: number){
    console.log('id: ', id);
    console.log('this.array: ', this.array[id]);
  }

}

app.component. html

<div *ngFor="let item of array, let i = index">
  <input [id]="'id_' + item.id" [(ngModel)]="item.value"/>
  <button type="button" (click)="printValue(i)"> 
    button {{item.id}}
  </button>
</div>

Я подготовил для вас Stackblitz (ваш, к сожалению, не открылся): https://stackblitz.com/edit/angular-eugxqe?file=src%2Fapp%2Fapp.component.html