Lokale Angular2-Vorlagenvariablen

Question

Im folgenden Beispiel bezeichne ich eine lokale Variable #input für mehrere Optionsfelder. Wenn ich auf <tr> klicke, möchte ich den Radioknopf innerhalb auswählen.

Und der folgende Code funktioniert gut, aber ich verstehe nicht warum.

Wie kann Angular2 "wissen", welchen Eingang ich verweise, wenn ALLE die lokale Variable #input haben?

HTML

<tr *ngFor="let office of employee.offices" (click)="selectOffice(input)"> 
    <td class="select-office-radio"> 
     <input type="radio" name="office" #input /> 
    </td> 
    <td> 
     {{office.officeName}} 
    </td> 
    </tr> 

JS

selectOffice(input) { 
    input.checked = true; 
} 

Answer 1

Wie Bhushan sagte ngFor ist eine strukturelle Richtlinie, so dass es eine Abkürzung für eine Template-basierte Struktur ist. Kurz gesagt, kann es in den folgenden in Ihrer Vorlage entzuckert werden:

<template ngFor let-office [ngForOf]="employee.offices"> 
    <tr (click)="selectOffice(input)"> 
    (...) 
    </tr> 
</template> 

Die Art und Weise lokale Variable für Vorlagen ist folgendes zu definieren:

• Fügen Sie das Präfix let-. Zum Beispiel definiert let-office eine Variable office.
• Wenn Sie keinen Wert definieren, wird der Wert des Eintrags $implicit im Vorlagenkontext verwendet. Im Fall von ngFor ist es das aktuelle Element in der Iteration. Hier: let-office.
• Sie können auch einen Wert angeben. Wenn Sie beispielsweise eine Variable für den Index in der Schleife definieren möchten: let-i="index". In diesem Fall enthält die Variable i den entsprechenden Wert.

In Bezug auf Variablen mit dem Präfix definieren. Sie entsprechen einem DOM-Element, wenn das Element, auf das sie angewendet werden, keine Komponente ist. Wenn es sich um eine Komponente handelt, entspricht sie der Komponente. Zum Beispiel entspricht input in <input #input/> einem ElementRef und das DOM-Element kann über seine nativeElement Eigenschaft zugegriffen werden.

Sie können auch einen Wert für solche Variablen angeben. In diesem Fall können Sie eine bestimmte Anweisung auswählen, die auf das Element angewendet wird. Zum Beispiel <input #ctrl="ngModel" [(ngModel)]="val"/>. Der Wert entspricht dem, was innerhalb des exportAs Attribut in der Richtlinie Erklärung angegeben ist:

@Directive({ 
    selector: 'child-dir', 
    exportAs: 'child' 
}) 
class ChildDir { 
} 

@Component({ 
    selector: 'main', 
    template: `<child-dir #c="child"></child-dir>`, 
    directives: [ChildDir] 
}) 
class MainComponent { 
} 

Answer 2

* ngFor ist eine strukturelle Richtlinie heißt es das DOM modifiziert.

so für jeden Datensatz seine Erstellung seiner separaten input element erstellen.

Sie deklarieren auch #input als eine lokale Variable für input element so #input bezieht sich auf jedes Eingabeelement separat.

wenn Sie den Wert in der Texteingabe eingegeben zugreifen mögen, Sie können folgende tun:

selectOffice(input.value) 

weil #input Eingabeelement in HTML verweist.

für weitere Informationen können Sie sich beziehen:

Displaying Data using structural directives