使用* ngFor的数组中Angular 2 First Item丢失 [英] Angular 2 First Item in Array Missing using *ngFor

问题描述

使用角度快速入门应用程序( https://github.com/angular/quickstart/blob/master/README.md ).使用角度2.1.1

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

使用* ngFor，列表的第一项没有出现在页面上.我的控制台没有任何错误，但是在teacher.component.ts中看到了ngOnInit的以下控制台日志输出:

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.

请注意，重复块中缺少第一位老师，但json数组中没有.

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

代码:

teacher.component.ts:

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:

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:

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

谢谢您的帮助！

推荐答案

问题是，您正在app.module中引导TeacherComponent，并且它被视为入口组件，因此会首次中断我们的渲染.

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

这是一些有关如何引导的内容 https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-bootstrap_vs_entry_component

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

这篇关于使用* ngFor的数组中Angular 2 First Item丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！