Angular app.component.html 未呈现新组件

Question

我在尝试在浏览器中呈现我的新组件时遇到了一些问题。我使用 Angular CLI 创建了一个新项目。我还创建了一个名为 list-employees.

的组件

当我执行ng serve -o时，项目编译成功但浏览器没有显示任何内容（IE和Google Chrome都是空白页面）。即使 Chrome 中的 Web 控制台也没有显示任何错误消息，而是打印 Angular is 运行 in the development mode。调用enableProdMode()开启生产模式

如果我更改 app.component.html 中的内容：

 <app-list-employees></app-list-employees>

我用静态 HTML 代替：

<p>Hello world</p>

浏览器按预期显示内容。这对我来说似乎很奇怪，因为我没有收到任何错误。你能帮我理解为什么会这样吗？

这里是package.json文件的内容：

{
  "name": "crud",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.12",
    "@angular/common": "~8.2.12",
    "@angular/compiler": "~8.2.12",
    "@angular/core": "~8.2.12",
    "@angular/forms": "~8.2.12",
    "@angular/platform-browser": "~8.2.12",
    "@angular/platform-browser-dynamic": "~8.2.12",
    "@angular/router": "~8.2.12",
    "bootstrap": "^3.4.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.15",
    "@angular/cli": "~8.3.15",
    "@angular/compiler-cli": "~8.2.12",
    "@angular/language-service": "~8.2.12",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

这里是当我调用 list-employees 组件时 app.componen.html 的输出：

<body>
    <app-root _nghost-xoo-c0="" ng-version="8.2.12">
    <app-list-employees _ngcontent-xoo-c0="" _nghost-xoo-c1="">
    <!--bindings={}-->
    </app-list-employees>
    </app-root>
    <script src="runtime.js" type="module"></script>
    <script src="polyfills.js" type="module"></script>
    <script src="styles.js" type="module"></script>
    <script src="vendor.js" type="module"></script>
    <script src="main.js" type="module"></script>  
 </body>

已更新

这里是相应的代码：

列表-employees.component.ts

import { Component, OnInit } from '@angular/core';
import { Employee } from '../models/employee.model';

@Component({
  selector: 'app-list-employees',
  templateUrl: './list-employees.component.html',
  styleUrls: ['./list-employees.component.css']
})
export class ListEmployeesComponent implements OnInit {

  employee: Employee[] = [
    {
      id: 1,
      name: 'Mark',
      gender: 'Male',
      contactPreference: 'Email',
      email: 'mark@pragimtech.com',
      dateOfBirth: new Date('10/25/1988'),
      department: 'IT',
      isActive: true,
      photoPath: 'assets/images/mark.png'
    },
    {
      id: 2,
      name: 'Mary',
      gender: 'Female',
      contactPreference: 'Phone',
      phoneNumber: '2345978640',
      dateOfBirth: new Date('11/20/1979'),
      department: 'HR',
      isActive: true,
      photoPath: 'assets/images/mary.png'
    },
    {
      id: 3,
      name: 'John',
      gender: 'Male',
      contactPreference: 'Phone',
      phoneNumber: '5432978640',
      dateOfBirth: new Date('3/25/1976'),
      department: 'IT',
      isActive: false,
      photoPath: 'assets/images/john.png'
    },
  ];

  constructor() { }

  ngOnInit() {
  }

}

列表-employees.component.html

<div class="panel panel-primary" *ngFor="let employee of employees">
    <div class="panel-heading">
        <h3 class="panel-title">{{employee.name}}</h3>
    </div>
    <div class="panel-body">
        <div class="col-xs-10">
            <div class="row vertical-align">
                <div class="col-xs-4">
                    <img class="imageSize" [src]="employee.photoPath"/>
                </div>
                <div class="col-xs-8">

                    <div class="row">
                        <div class="col-xs-6">
                            Gender:
                        </div>
                        <div class="col-xs-6">
                            {{employee.gender}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            Birth of date:
                        </div>
                        <div class="col-xs-6">
                            {{employee.dateOfBirth | date}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                          Contact Preference:
                        </div>
                        <div class="col-xs-6">
                          {{employee.contactPreference}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                          Phone:
                        </div>
                        <div class="col-xs-6">
                          {{employee.phoneNumber}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                          Email:
                        </div>
                        <div class="col-xs-6">
                          {{employee.email}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            Department:
                        </div>
                        <div class="col-xs-6">
                            {{employee.department}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            Is active:
                        </div>
                        <div class="col-xs-6">
                            {{employee.isActive}}
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

app.component.html

<app-list-employees></app-list-employees>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ListEmployeesComponent } from './employees/list-employees.component';

@NgModule({
  declarations: [
    AppComponent,
    ListEmployeesComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

问题是在 ListEmployeesComponent 中你正在循环 employees 属性，它不存在。

相反，有一个错误命名的员工（没有 s）属性，包含数组。

我建议安装 Angular 语言服务插件（如果它在你的文本编辑器中可用，我使用 VS Code），它会捕获那种在有问题的行下划红色下划线的错误。

Angular app.component.html 未呈现新组件

Angular app.component.html is not rendering new component

javascript

angular-cli

angular