Angular 2 使用 *ngFor 时数组中的第一项丢失

Question

使用 angular 快速启动应用程序 (https://github.com/angular/quickstart/blob/master/README.md)。使用 angular 2.1.1

使用 *ngFor，列表的第一项不会出现在页面上。我在控制台中没有收到任何错误，但在 teacher.component.ts:

中的 ngOnInit 中看到以下控制台日志输出

Erty
Dave
Sarah
Walter
undefined

最后那个"undefined"表示数组的第一个元素正在重新定义，但我不知道为什么。

这是输出的屏幕截图 -- 代码贴在下面。

请注意，第一个老师在重复块中缺失，但不在 json 数组中。

代码：

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"
    ];
}

感谢您的帮助！

Answer 1

我没有发现任何问题，我在这个 Plunker! 中尝试过并且有效。

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);
    }
}

Answer 2

问题是您在 app.module 中引导 TeacherComponent 并且它被视为入口组件，这使得我们的目的第一次渲染中断。

此更改将使其正确呈现：

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 { }

这里有一些关于 bootstrap https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-bootstrap_vs_entry_component

的阅读材料

Angular 2 使用 *ngFor 时数组中的第一项丢失

Angular 2 First Item in Array Missing using *ngFor

ngfor

angular