Angular 2 - Zugang/erhält das Eingangselement innerhalb einer * ngFor und ngModel

Question

<ion-card *ngFor='#product of products | mapToIterable:"key":true'> 
    <ion-list> 
     <ion-item> 
      <ion-label stacked>Account No./Phone No.</ion-label> 
      <ion-input type="text" [(ngModel)]="product.msisdn"></ion-input> 
     </ion-item> 
     <ion-item> 
      <ion-label stacked>Amount</ion-label> 
      <ion-input type="text" (keypress)="isNumberKey($event)" [(ngModel)]="product.amount"></ion-input> 
     </ion-item> 
    </ion-list> 
</ion-card> 

zum html oben Bezug genommen, wie bekomme ich den Hinweis von Ionen Eingang, so dass ich kann setFocus() auf mich nach Überprüfung fehlschlägt. Ich bin bereits mit dem unten stehenden Code gekommen, um alle Eingaben zu validieren.

for (var product of <any>this.products) { 
    if (product.service_type_id == 2 && !product.msisdn) { 
     alert('something'); 
     //Get the element and set focus here. 
    } 
} 

Ist das ein guter Ansatz? Gibt es einen besseren Weg, dies in Angular 2 zu behandeln?

Answer 1

Ein Ansatz Referenzen von Elementen mit *ngFor ist @ViewChildren()

erstellt bekommen, wenn die Elemente tatsächlich Komponenten oder Richtlinien sind dann die Komponente/directive Typ kann als Parameter sonst ein Template-Variable übergeben werden kann hinzugefügt werden und der Namen Die Template-Variable (als String) kann verwendet werden, um die Elemente abzufragen.

In diesem Fall sowohl ein Template-Variable und der Komponententyp die Komponenteninstanz zurück, sondern Fokus anrufen müssen wir die ElementRef.nativeElement deshalb ich eine Helfer-Richtlinie erstellt, die ion-input angewandt wird, und verwendet wird, um die Elemente abzufragen und auch focus() anrufen :

import {Component, Directive, Renderer, HostListener, ViewChildren, ElementRef} from 'angular2/core' 

/// Helper directive 
@Directive({ 
    selector: 'ion-input' 
}) 
class Focusable { 
    constructor(public renderer: Renderer, public elementRef: ElementRef) {} 

    focus() { 
    console.debug(this.elementRef.nativeElement); 
    this.renderer.invokeElementMethod(
     this.elementRef.nativeElement, 'focus', []); 
    } 
} 

/// Test component instead of the original ion-input 
@Component({ 
    selector: 'ion-input', 
    host: {'tabindex': '1'}, 
    template: ` 
    <div>input (focused: {{focused}})</div> 
    `, 
}) 
export class IonInput { 
    focused:boolean = false; 

    @HostListener('focus') 
    focus() { 
    this.focused = true; 
    } 
    @HostListener('blur') 
    blur() { 
    this.focused = false; 
    } 
} 

/// Queries the elements and calls focus 
@Component({ 
    selector: 'my-app', 
    directives: [IonInput, Focusable], 
    template: ` 
    <h1>Hello</h1> 
<div *ngFor="let product of products"> 
    <ion-input #input type="text"></ion-input> 
</div> 
<button *ngFor="let product of products; let index=index" (click)="setFocus(index)">set focus</button> 
    `, 
}) 
export class AppComponent { 
    constructor(private renderer:Renderer) { 
    console.debug(this.renderer) 
    } 

    products = ['a', 'b', 'c'] 
    @ViewChildren(Focusable) inputs; 

    ngAfterViewInit() { 
    // `inputs` is now initialized 
    // iterate the elements to find the desired one 
    } 

    setFocus(index) { 
    // `inputs` is now initialized 
    // iterate the elements to find the desired one 
    //var input = ... 
    //console.debug(this.inputs.toArray()[1]); 
    this.inputs.toArray()[index].focus(); 
    } 
} 

Siehe auch Angular 2: Focus on newly added input element

Plunker example