Angular app.component.html не отображает новый компонент - PullRequest
Новая
       24

Angular app.component.html не отображает новый компонент

2 голосов
/ 30 октября 2019

У меня возникают проблемы при рендеринге моего нового компонента в браузере. Я создал новый проект, используя Angular CLI . Также я создал компонент с именем list-employees.

. Когда я выполняю ng serve -o, проект успешно компилируется, но браузер ничего не показывает (пустая страница как IE, так и Google Chrome). Даже веб-консоль в Chrome не показывает никаких сообщений об ошибках, вместо этого выводит Angular работает в режиме разработки. Вызовите 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"
  }
}

А вот вывод с app.componen.html, когда я вызываю компонент list-employee: 

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

ОБНОВЛЕНО

Вот соответствующий код:

list-employee.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() {
  }

}

list-employee.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 { }

1 Ответ

3 голосов
/ 30 октября 2019

Проблема в том, что в ListEmployeesComponent вы циклически повторяете свойство employees, которого не существует.

Вместо этого существует свойство сотрудника с неправильным именем (без s), содержащее массив.

Я бы предложил установить плагин Angular Language Service (если он доступен в вашем текстовом редакторе, я использую VS Code), который улавливал бы такую ​​ошибку, подчеркивая оскорбительную строку красным.

...