Angular 2 First Item in Array Missing using *ngFor

问题

Using the angular quickstart app (https://github.com/angular/quickstart/blob/master/README.md). Using angular 2.1.1

Using *ngFor, the first item of the list doesn't appear on the page. I'm getting no errors in my console, but seeing the following console log output from the ngOnInit in teacher.component.ts:

Erty
Dave
Sarah
Walter
undefined

That last "undefined" means that the first element of the array is being redefined, but I don't know why.

Here's a screenshot of the output -- the code is posted below.

Note that the first teacher is missing from the repeated block, but not in the json array.

Code:

teacher.component.ts:

import { Component, Input } from "@angular/core";

@Component({
    selector: 'teacher',
    template: `
        <p>Teacher {{index}}: {{teacherName}}</p>
    `
})
export class TeacherComponent {
    @Input() teacherName: string;
    @Input() index: number;

    ngOnInit() {
        console.log(this.teacherName);
    }
}

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { TeacherComponent } from './teacher.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [TeacherComponent, AppComponent ],
  bootstrap: [ AppComponent, TeacherComponent ]
})
export class AppModule { }

app.component.ts:

import { Component } from '@angular/core';

import { TeacherComponent } from "./teacher.component";

@Component({
    selector: 'my-app',
    template: `<h1>CodeCraft Learning Angular!</h1>
        <pre>{{teachers | json}}</pre>
        <teacher *ngFor="let t of teachers; let i = index" [teacherName]="t" [index]="i"></teacher>

    `
})
export class AppComponent {
    public teachers: string[] = [
        "Erty",
        "Dave",
        "Sarah",
        "Walter"
    ];
}

Thank you for your help!

回答1:

The issue is that you are Bootstrapping TeacherComponent in your app.module and it being treated as an entry component which makes the first render break for our purposes.

This change will make it render properly:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { TeacherComponent } from './teacher.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [TeacherComponent, AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

And here's some reading on what to bootstrap https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-bootstrap_vs_entry_component

回答2:

I don't see any issue, I tried this in this Plunker! and it works.

import { Component,Input } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h3>Angular 2 First Item in Array Missing using *ngFor</h3>
     <pre>{{teachers | json}}</pre>
    <teacher *ngFor="let t of teachers; let i = index" [teacherName]="t" [index]="i"></teacher>
  `
})
export class AppComponent {
   public teachers: string[] = [
        "Erty",
        "Dave",
        "Sarah",
        "Walter"
    ];
}

@Component({
    selector: 'teacher',
    template: `
        <p>Teacher {{index}}: {{teacherName}}</p>
    `
})
export class TeacherComponent {
    @Input() teacherName: string;
    @Input() index: number;

    ngOnInit() {
        console.log(this.teacherName);
    }
}

来源：https://stackoverflow.com/questions/40291111/angular-2-first-item-in-array-missing-using-ngfor

标签

angular

ngfor