Angular 使用*ngFor缺少数组中的角度2第一项

使用angular quickstart应用程序（）。使用第2.1.1节

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

teacher.component.ts

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

Erty
Dave
Sarah
Walter
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);
    }
}

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

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

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

从'@angular/core'导入{Component}；
从“/teacher.component”导入{TeacherComponent}；
@组成部分({
选择器：“我的应用程序”，
模板：`CodeCraft！
{{教师| json}
`
})
导出类AppComponent{
公立教师：字符串[]=[
“厄尔蒂”，
“戴夫”，
“莎拉”，
“沃尔特”
];
}

---

谢谢你的帮助

我看不出有什么问题，我试过这个，效果很好

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

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“我的应用程序”，
模板：`Angular 2使用*ngFor缺少数组中的第一项
{{教师| json}
`
})
导出类AppComponent{
公立教师：字符串[]=[
“厄尔蒂”，
“戴夫”，
“莎拉”，
“沃尔特”
];
}
@组成部分({
选择器：'老师'，
模板：`
教师{{index}}:{{teacherName}

`
})
导出类教师组件{
@Input（）教师姓名：string；
@Input（）索引：数字；
恩戈尼尼特（）{
console.log（this.teacherName）；
}
}

问题在于，您正在app.module中引导TeacherComponent，并且它被视为一个入口组件，为我们提供了第一次渲染中断

此更改将使其正确渲染：

---

这里有一些关于如何引导的阅读资料

你能显示控制台输出吗？上传在上面，这里有一个屏幕截图：Winner！我重写了它，但保留了bootstrap声明，它成功了。谢谢：）很乐意帮忙。出去，这有帮助！谢谢[2020年9月9日]