我正在尝试将数据从 parent 传递到 child 但出现错误

Question

我正在尝试将数据从 parent 传递到 child 因为我正在使用 @Input 装饰器，但我是

获取错误：

Can't bind to 'employees' since it isn't a known property of 'app-display-employee'.

我从 parent html 文件中收到此错误，我在该文件中将包含数据的数组绑定到 child 选择器

Parent html 文件：list.employee.component.html

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

其他代码在这里：

Parent 文件：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组件中的代码

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

试试这个：

list.employee.component.html

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

Answer 2

你有 @Input() employee: Employee; 但你通过了属性 [empolyees] (<app-display-employee [employees]='employee'> </app-display-employee>) 所以这是错字。

你应该写 @Input() employee: Employee; 并使用属性 [employee] 因为那是 EmployeeComponent 所期望的。

我正在尝试将数据从 parent 传递到 child 但出现错误

I am trying to pass data from parent to child but I am getting error

angularjs-directive

angular

angular5

angular6