时间戳

首页 > 解决方案 > *ngFor 根本不显示数据

angular - *ngFor 根本不显示数据

问题描述

我是 Angular 的新手，正在尝试创建一个简单的 webapp。在我的代码中，我使用 *ngFor 生成一些输入框，但没有显示任何内容。我已经尝试过简化我的代码，但它仍然无法正常工作！

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

组件.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'); 
  }
}

组件.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 可能无法工作有什么原因吗？

标签： angularngfor

解决方案

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

我制作了一个小代码笔，向您展示了一个使用您的代码的工作示例。

推荐阅读