要在DOM中查找元素而不使用在angular 2+中使用* ngFor生成的document.getElementById（）

Question

app.component.html:

<div *ngFor = "let ivalue of arraytoDispaly;let i = index;">
      <input type="text" id={{i}} [value]="ivalue.inputValue" />
</div>
<button (click)='GetElementValue()'>GetElementValue</button>

app.component.ts:

arraytoDispaly = [{'inputValue':'abc'},
                  {'inputValue':'def'},
                  {'inputValue':'ghi'}];
GetElementValue(){
 var t = (<HTMLInputElement>document.getElementById('1')).value;
 console.log(t);
}

Whenever I am clicking on 'GetElementValue' button, I am getting the value of input field with id of '1' as 'def'. Need to know is there any other way to access element generated by *ngFor in angular. Thanks

Answer 1

Tag your inputs with a template variable:

<div *ngFor = "let ivalue of arraytoDispaly;let i = index;">
      <input #inputs type="text" id={{i}} [value]="ivalue.inputValue" />
</div>
<button (click)='GetElementValue()'>GetElementValue</button>

Then you can use @ViewChildren and query for the ElementRef using the QueryList API:

@ViewChildren('inputs', 
    { read: ElementRef }) inputs: QueryList<ElementRef>;

The possible values for read are: ElementRef , ViewContainerRef or name of the Component/Directive itself (useful if you have more than one directive on an element).

Initialize the elements if you need to by implementing AfterViewInit :

ngAfterViewInit(): void {
   // so something with inputs
}

You also have access to inputs via a click handler:

GetElementValue(){
   var t = (<HTMLInputElement> this.inputs.toArray()[1].nativeElement).value;
   console.log(t);
}

Or more succinctly using map :

 GetElementValue(){
    var t = (<HTMLInputElement> this.inputs.map(t=>t.nativeElement)[1]).value;
    console.log(t);
 }

For more information, here is everything you need to know about how to use @ViewChildren:

https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e

https://blog.angular-university.io/angular-viewchild/