Angular 2 - lokale Variable/Template Referenzvariable mit * ngIf - NUR erste Element des Arrays nicht verbindlich

Question

Plunker hier: https://plnkr.co/edit/te67zdtkVkNCUzEtW5XO?p=preview app.ts sehen

Hintergrund:

Die übergeordnete Komponente hat eine Reihe und zeigt ein Element im Array an. Die ChildComponent ist eine Liste, die das Array mit einer Variablen anzeigt, die beim Klicken auf das Element festgelegt wird.

selectNumber(idx: number) { 
    this.selectedIdx = idx; 
    } 

Das Parent erhält den selectedIdx Wert von dem Kind durch das Kind als lokaler Variable #child speichern und unter Verwendung child.selectedIdx erreichbar.

Problem:

Die Bindung zwischen selectedIdx in der untergeordneten Komponente und der übergeordneten Komponente es funktioniert perfekt für jedes Element in der Anordnung abgesehen von der ersten (Index 0) zugreifen - wenn Sie 1 klicken, wird die Element bei Index 0 verschwindet die Selected Number In Parent: _.

Das bedeutet, dass *ngIf falsch ist, was bedeutet, selectedIdx ist null.

Dies ist jedoch nicht der Fall, wenn ich einen Haltepunkt in der selectNumber()-Funktion in der untergeordneten Komponente, this.selectedIdx auf 0 gesetzt wird. Es muss etwas verrücktes mit dem Eltern, den Wert 0 abrufen und dann denken es ist null?

Jede Hilfe geschätzt, vielen Dank.

Basierend auf: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var

Answer 1

Es ist, weil in Javascript 0 == false, so dass Ihre *ngIf Ausdruck false zurückgibt, wenn mit 0

ändern sie verglichenen:

*ngIf="child.selectedIdx !== undefined" 

This answer hat ein ausgezeichneter Tisch darüber.