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;它使我获得了正确的价值,但从父母那里得到它对我没有用,请提出建议。谢谢