2017-12-31 62 views
0

Ich bin neu zu Event-Bindung, und ich kann nicht verstehen, warum und wie ein Wert in () übergeben wird und sein Wert geladen wird. Ich verfolge Angular tutorial die TeilWie funktioniert Event Binding mit übergebenen Wert

<li *ngFor="let hero of heroes" (click)="onSelect(hero)"> 

wo

selectedHero: Hero; 

onSelect(hero: Hero): void { 
    this.selectedHero = hero; 
} 

Ich kann nicht verstehen, woher der (Held) stammte aus und wissen, wie auf diesem Code die Daten

Antwort

0

Basierend laden kann ich Angenommen, diese Komponente ist in einer Klasse mit dem Array heroes implementiert. Sehr wahrscheinlich gibt es in der Vorlage Ihrer Komponente eine Liste, z. <ul>. Die *ngFor Direktive durchläuft das Array heroes und erstellt ein <li> Element für jedes Array-Element. Die Variable hero wird nur verwendet, um durch das Array zu iterieren, und Sie könnten alles benannt haben.

Nachdem die Schleife abgeschlossen ist, ist jeder Wert <li> eine Instanz von Hero aus dem Array und jeder <li> hat einen Klick-Listener. Wenn Sie auf ein Listenelement (<li>) klicken, wird die Methode onClick aufgerufen, indem Sie die Instanz übergeben, die diesem Listenelement während der Schleife zugewiesen wurde.

1

Das Objekt hero stammt aus der *ngFor="let hero of heroes".

ngFor Direktive: ist eine Möglichkeit, eine Vorlage zu wiederholen, indem jedes iterierbare Element als Kontext dieser Vorlage verwendet wird.

jeder Schleife der Helden wird ein spezifisches hero Objekt verwenden und wird eine li Element erstellen, die eine Verwendung von onClick Ereignis (click)="onSelect(hero)" binden.

Wie Sie sehen können, onSelect Methode wurde in Ihrer Komponente als onSelect(hero: Hero): void deklariert diese Deklaration ermöglicht es Ihnen, es an einer beliebigen Stelle innerhalb der Komponente Selektor zu verwenden.

Auf der anderen Seite, heroes Objekt ist ein Array des Typs hero und wird zuvor in Ihrer Komponente geladen werden.

Wahrscheinlich wurde Array geladen, einen bestimmten Dienst zum Laden heroes zu laden, und es ist eines der ersten, was jede Komponente tun muss, um die erforderlichen Daten zu laden, die gerendert werden.

In Komponente HeroesComponent der Daten in Bezug auf heroes wurde wie folgt erklärt:

heroes = HEROES; 

In diesem Tutorial, die heroes Daten durch diese Datei zur Verfügung gestellt mock-heroes.ts und dessen Inhalt ist die folgende:

import { Hero } from './hero'; 

export const HEROES: Hero[] = [ 
    { id: 11, name: 'Mr. Nice' }, 
    { id: 12, name: 'Narco' }, 
    { id: 13, name: 'Bombasto' }, 
    { id: 14, name: 'Celeritas' }, 
    { id: 15, name: 'Magneta' }, 
    { id: 16, name: 'RubberMan' }, 
    { id: 17, name: 'Dynama' }, 
    { id: 18, name: 'Dr IQ' }, 
    { id: 19, name: 'Magma' }, 
    { id: 20, name: 'Tornado' } 
]; 
Verwandte Themen