从父级获取错误Angular7 @input装饰器不起作用

时间:2019-02-06 12:27:37

标签: angular2-directives

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

    @Component({
        selector: 'employee-count',
        templateUrl : './employee.component.html',
        styleUrls : ['../../styles/app.component.css']
    })

    export class Employee {
        @Input()
        all: number;

        @Input()
        male: number;

        @Input()
        female: number;
    }

<span class="radioClass">Show : </span>

<input type="radio" name="options" />
<span class="radioClass">{{"All(" + all + ")"}}</span>

<input name="options" type="radio">
<span class="radioClass">{{"Male(" + male + ")"}}</span>

<input name="options" type="radio">
<span class="radioClass">{{"Female(" + female + ")"}}</span>

<br /><br /> 

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

@Component({
  selector: 'app-root',
  templateUrl: '../component/app.component.html',
  styleUrls: ['../styles/app.component.css']
})
export class AppComponent {

 employees: any[];

    constructor() {
       this.employees = [
    {  
      employee_id : '1',
      firstname  : 'Some',
      lastname  : 'user',
      gender : 'Male',
      age  : 28,
      salary : 50000,
      dob  : '26/01/1991'  
  }, 
  {
      employee_id : '2',
      firstname  : 'Other',
      lastname  : 'user',
      gender : 'Male',
      age  : 26,
      salary : 60000,
      dob  : '02/01/1993'  
  },
  {
      employee_id : '3',
      firstname  : 'next',
      lastname  : 'Jii',
      gender : 'Male',
      age  : 24,
      salary : 40000,
      dob  : '30/10/1995'  
  },
  {
      employee_id : '4',
      firstname  : 'Kat',
      lastname  : 'Hales',
      gender : 'Female',
      age  : 25,
      salary : 120000,
      dob  : '30/10/1994'  
  },
  {
      employee_id : '5',
      firstname  : 'Binny',
      lastname  : 'Root',
      gender : 'Female',
      age  : 27,
      salary : 220000,
      dob  : '30/10/1992'  
  },
  {
      employee_id : '6',
      firstname  : 'Seema',
      lastname  : 'Singh',
      gender : 'Female',
      age  : 27,
      salary : 21000,
      dob  : '30/10/1992'  
  },
  ];
 }

   parentExample: string = 'Hello Angular 7';


   getTotalEmployeesCount(): number {
        return this.employees.length;
    }

    getMaleEmployeesCount(): number {
        return this.employees.filter(e => e.gender == 'Male').length;
    }

    getFemaleEmployeesCount(): number {
        return this.employees.filter(e => e.gender == 'Female').length;
    }
}
<employee-count [all]="getTotalEmployeesCount()"
                [male]="getMaleEmployeesCount()"
                [female]="getFemaleEmployeesCount()">
</employee-count>

从父级获取时,错误Angular7 @input装饰器不起作用

不确定为什么我会得到所有(未定义)男性(未定义)女性(未定义)。

即使我在控制台中没有看到任何错误。如果我分配@Input @Input()全部:number = 10;它使我获得了正确的价值,但从父母那里得到它对我没有用,请提出建议。谢谢

0 个答案:

没有答案