Я пытаюсь передать данные от родителя к ребенку, но получаю ошибку

Question

Я пытаюсь передать данные от родителя к ребенку для этого я использую @Input Decorator, но я

Получение ошибки:

Невозможно выполнить привязку к «работникам», поскольку это не известное свойство «app-display-employee».

Я получаю эту ошибку из родительского html-файла, где япривязываю массив, содержащий данные, к дочернему селектору

Родительский html-файл: list.employee.component.html

 <div class="panel panel-primary" *ngFor="let employee of employees">
        <app-display-employee [employees]='employee'> </app-display-employee>
    </div>

Другой код здесь:

Родительский файл ts: list.employee.component.ts

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

  employees: Employee[];

  constructor( public  _EmployeeService: EmployeeService) { }

  ngOnInit() {
    this.employees = this._EmployeeService.getEmployees();
    console.log(this.employees[0]);
  }

}

код в дочернем компоненте

child.component.ts

import { Component, OnInit  , Input} from '@angular/core';
import { Employee } from '../modles/employee.model';
@Component({
  selector: 'app-display-employee',
  templateUrl: './display-employee.component.html',
  styleUrls: ['./display-employee.component.css']
})
export class DisplayEmployeeComponent implements OnInit {

@Input() employee: Employee;

  constructor( ) { }

  ngOnInit() {
  }

}

child.component.html

<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="imageClass" [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">
              Date of Birth
            </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" [ngSwitch]="employee.department" > 
              <span *ngSwitchCase="1"> : HR </span>
              <span *ngSwitchCase="2"> : Cab Driber </span>
              <span *ngSwitchCase="3"> : Developer </span>
              <span *ngSwitchCase="4"> : Designer </span>
              <span *ngSwitchCase="5"> : System Admin  </span>
              <span *ngSwitchCase="6"> : Bidder </span>
              <span *ngSwitchCase="7"> : Manager </span>
              <span *ngSwitchDefault> : Unemployed </span>


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

Answer 1

У вас есть @Input() employee: Employee;, но вы передаете свойство [empolyees] (<app-display-employee [employees]='employee'> </app-display-employee>), так что это опечатка.

Вы должны написать @Input() employee: Employee; и использовать свойство [employee], потому чтовот этого EmployeeComponent ожидает.

Answer 2

Попробуйте это:

list.employee.component.html

 <div class="panel panel-primary" *ngFor="let employee of employees">
        <app-display-employee [employee]='employee'> </app-display-employee>
 </div>