ошибка: ОШИБКА TypeError: Невозможно прочитать свойство 'имя' из неопределенного при передаче данных от родительского к дочернему компоненту

Question

Я работаю над приложением Angular, в котором я передаю данные от родительского к дочернему компоненту.Но я получаю ошибку:

ошибка:

**

ОШИБКА TypeError: Невозможно прочитать свойство 'name' из неопределенного

**

Я добавляю код, который использовал для родительского компонента

import { Component, OnInit } from '@angular/core';


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

  Employee: any = [ {
    name : 'Anurag',
    gender: 'male',
    dateOfBirth: '1-3-1993',
    contactPreference: 'at night',
    phoneNumber: '9471160160',
    email: 'anurag.qsp@gmail.com',
    department: 'Software Developemnt',
    isActive: 'yes',
  }];
  constructor() { }

  ngOnInit() {
    console.log('two works !');
  }

}

HTML:

<div *ngFor="let employees of Employee" >
   <app-one [employee]="employees"></app-one>
 </div>

I код вставки дочернего компонента , в который переданы данные родительского компонента

ts - >>

import { Component, OnInit, Input } from '@angular/core';

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

  @Input() employee: any;

  constructor() { }

  ngOnInit() {
     console.log(this.employee);
  }
}

html - >>

<div class="panel panel-primary">
  <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>
</div>

Answer 1

Вы присваиваете employees, когда у вас есть employee (без s в конце) в OneComponent как @Input свойство.

Это:

<app-one [employees]="employees"></app-one>

Должно быть:

<app-one [employee]="employees"></app-one>