Question

我是Angular的新手，正在尝试创建一个简单的webapp。在我的代码中，我使用* ngFor生成了一些输入框，但未显示任何内容。我尝试将代码哑巴下来，但仍然无法正常工作！

这是我尝试过的一些简单代码：

Component.component.ts

import {Component, OnInit} from '@angular/core';
import { CommonModule } from "@angular/common";
import { ParentComponent} from "./ParentComponent/ParentComponent.component";

@Component({
  selector: 'app-component',
  templateUrl: './Component.component.html',
  styleUrls: ['./Component.component.css']
})

export class Component extends ParentComponent implements OnInit {
  private numbers : string[] = ['1', '2', '3'];

  constructor() { 
    super();
  }

  ngOnInit() {
    console.log(this.numbers);
    this.formElement = document.getElementById('form-1'); 
  }
}

Component.html.ts

<div class="form">
  <div *ngFor="let n of numbers; let i = index">
    {{ n }} {{ i }}
  </div>
</div>

ParentComponent.component.ts

import {Input} from '@angular/core';
import {EmployeeData} from "../EmployeeData";

export abstract class ParentComponent {

  @Input('EmployeeData') employeeData : EmployeeData;
  protected formElement;
  protected errorMessage : string;

  protected constructor() {
    this.errorMessage = "";
  }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from "@angular/forms";
import { CommonModule} from "@angular/common";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Component } from './Component/Component.component';
import { ParentComponent } from './ParentComponent/ParentComponent.component';

@NgModule({
  declarations: [
    AppComponent,
    Component,
    ParentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

运行此命令时，* ngFor会生成3个空div，其中没有任何内容。我一遍又一遍地进行了测试，并寻找了可能的解决方案，但还是没有运气。

我只是愚蠢而做错了什么吗？

编辑：更新了更多代码。

编辑2：我在另一个组件中尝试了此代码，并且可以正常工作... ngFor为何可能无法正常工作？

Answer 1

您的代码唯一明显的错误是numbers是私有的。删除该访问修饰符。

我制作了a little codepen，向您展示了使用您的代码的工作示例。

* ngFor根本不显示数据

1 个答案: