Question

我正在尝试使用@Input装饰器将数据从父级传递到子级，但是我是

出现错误：

无法绑定到“员工”，因为它不是的已知财产 “ 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

尝试一下：

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;，但您要传递属性 [员工] （<app-display-employee [employees]='employee'> </app-display-employee>），所以是错字。

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

我正在尝试将数据从父母传递给孩子，但出现错误

2 个答案: