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

Posted 2023-03-13

【中文标题】使用 *ngFor 的 Angular 2 第一项在数组中丢失

【英文标题】：Angular 2 First Item in Array Missing using *ngFor

【发布时间】：2017-03-10 12:31:14

【问题描述】：

使用 Angular 快速入门应用 (https://github.com/angular/quickstart/blob/master/README.md)。使用角度 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);
    

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

感谢您的帮助！

【问题讨论】：

你能显示控制台输出吗？

发在上面，截图如下：imgur.com/0azTXP9

【参考方案1】：

问题是你在你的 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  

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

【讨论】：

赢家！我重写了它，但是把那个引导声明去掉了，它起作用了。谢谢你:)

很高兴为您提供帮助。出来。

这有帮助！谢谢 [Angular 9，2020]

【参考方案2】：

我没有发现任何问题，我在 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);