Question

我是Angular2的新手，我正在学习@Input和@Output参数的使用，但它似乎对我不起作用。 emp.table.ts 是一个显示我员工的表的父组件，而 emp.count.component.ts 是一个嵌套的组件，我在其中定义了收音机按钮功能。

请找到以下代码：

emp.table.ts

import {Component} from '@angular/core';
@Component({
  selector: 'app-emp-table',
  templateUrl: './emp.table.html'
})
export class EmpTableComponent {
  selectedEmployeeRadioButton = 'All';


empcount: number;
  malecount: number;
  femalecount: number;
  employees: any[];

  constructor() {
  this.employees = [
  {code: 'emp101', name: 'Mark', gender: 'male', annualsal: 9550000, dob: '11/25/1989'},
  {code: 'emp102', name: 'Sam', gender: 'male', annualsal: 7500340, dob: '08/18/1995'},
  {code: 'emp103', name: 'Leslie', gender: 'female', annualsal: 245500, dob: '02/21/1988'},
  {code: 'emp104', name: 'Katlyn', gender: 'female', annualsal: 565500, dob: '04/15/1985'},
  {code: 'emp105', name: 'Nick', gender: 'male', annualsal: 245500, dob: '12/05/1982'},
  {code: 'emp106', name: 'Laura', gender: 'female', annualsal: 145500, dob: '05/08/1991'},
  {code: 'emp107', name: 'Marcella', gender: 'female', annualsal: 345600, dob: '07/26/1992'},
  {code: 'emp108', name: 'Tina', gender: 'female', annualsal: 4678990, dob: '01/28/1988'},
  {code: 'emp109', name: 'Scott', gender: 'male', annualsal: 5678900, dob: '09/18/1981'}
  ];

  this.empcount = this.getEmployeesCount();
  this.femalecount = this.getFemaleCount();
  this.malecount = this.getMaleCount();
  }

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

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

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

  getfullName() {
    return this.firstName + ' ' + this.lastName;
  }

  onEmployeeCountRadioButtonChange(selectedRadioButtonValue: string){
  this.selectedEmployeeRadioButton = selectedRadioButtonValue;
  }
}

emp.table.html

<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body class="alignSection">
<app-emp-count [all]="empcount"
               [male]="malecount"
               [female]="femalecount"
               (countRadioButtonSelectedChange)="onEmployeeCountRadioButtonChange($event)">
</app-emp-count>
<table>
    <tr>
        <td>Code</td>
        <td>Name</td>
        <td>Annual Salary</td>
        <td>Gender</td>
        <td>Date of Birth</td>
    </tr>
    <ng-container *ngFor= "let emp of employees">
    <tr *ngIf="selectedEmployeeRadioButton=='All' || selectedEmployeeRadioButton==emp.gender"> 
        <td>{{ emp.code }}</td>
        <td>{{ emp.name }}</td>
        <td>{{ emp.annualsal|currency:'USD' }}</td>
        <td>{{ emp.gender }}</td>
        <td>{{ emp.dob }}</td>
    </tr>
    </ng-container>
</table>

</body>
</html>

emp.count.component.ts

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

@Component({
  selector: 'app-emp-count',
  templateUrl: './emp.count.component.html'
})
export class EmpCountComponent {

  selectedRadioButtonValue = 'All';

  @Output()
  countRadioButtonSelectedChange: EventEmitter<string> = new EventEmitter<string>();

//  @Input() means these parameters will receive values from its parent component
  @Input() all: number;

  @Input() male: number;

  @Input() female: number;

  onRadioButtonSelectionChange() {
    this.countRadioButtonSelectedChange.emit(this.selectedRadioButtonValue);
    console.log(this.selectedRadioButtonValue);
  }
}

emp.count.component.html

<span class="radioClass">Show: </span>
<input type="radio" name="options" value="All" [(ngModel)]="selectedRadioButtonValue" (change)="onRadioButtonSelectionChange()"/>
<span class="radioClass">{{"All(" + all + ")" }}</span>
<input type="radio" name="options" value="male" [(ngModel)]="selectedRadioButtonValue" (change)="onRadioButtonSelectionChange()"/>
<span class="radioClass">{{"Male(" + male + ")"}}</span>
<input type="radio" name="options" value="female" [(ngModel)]="selectedRadioButtonValue" (change)="onRadioButtonSelectionChange()"/>
<span class="radioClass">{{"Female(" + female + ")"}}</span>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';



import { AppComponent } from './app.component';
import {EmpTableComponent} from './emp.table';
import {EmpCountComponent} from './emp.count.component';

@NgModule({
  declarations: [
    AppComponent, EmpTableComponent, EmpCountComponent
  ],
  imports: [
    BrowserModule, FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent, EmpTableComponent, EmpCountComponent]
})
export class AppModule { }

我得到以下输出。我试图从父组件（ emp.table.ts ）获取所有员工的数量，男性员工的数量和女性员工的数量，并将值传递给其嵌套组件（< strong> emp.count.component.ts ）使用@Input参数，但我得到（未定义），如下面的输出中所示。此外，如果我选择男性，那么表格应该只显示男性员工，如果我选择女性，那么表格应该显示女性员工。但是，该表每次都显示所有员工。

Answer 1

不要将函数作为输入参数传递，替换为集合。

<app-emp-count [all]="getEmployeesCount()"
               [male]="getMaleCount()"
               [female]="getFemaleCount()"               (countRadioButtonSelectedChange)="onEmployeeCountRadioButtonChange($event)">

到

<app-emp-count [all]="employees"
               [male]="Males"
               [female]="Females"               (countRadioButtonSelectedChange)="onEmployeeCountRadioButtonChange($event)">

并将值分配给父组件中的那些变量

我已对您的代码进行了更改，

  empcount: number;
  malecount: number;
  femalecount: number;
  employees: any[];

  constructor() {
  this.employees = [
  {code: 'emp101', name: 'Mark', gender: 'male', annualsal: 9550000, dob: '11/25/1989'},
  {code: 'emp102', name: 'Sam', gender: 'male', annualsal: 7500340, dob: '08/18/1995'},
  {code: 'emp103', name: 'Leslie', gender: 'female', annualsal: 245500, dob: '02/21/1988'},
  {code: 'emp104', name: 'Katlyn', gender: 'female', annualsal: 565500, dob: '04/15/1985'},
  {code: 'emp105', name: 'Nick', gender: 'male', annualsal: 245500, dob: '12/05/1982'},
  {code: 'emp106', name: 'Laura', gender: 'female', annualsal: 145500, dob: '05/08/1991'},
  {code: 'emp107', name: 'Marcella', gender: 'female', annualsal: 345600, dob: '07/26/1992'},
  {code: 'emp108', name: 'Tina', gender: 'female', annualsal: 4678990, dob: '01/28/1988'},
  {code: 'emp109', name: 'Scott', gender: 'male', annualsal: 5678900, dob: '09/18/1981'}
  ];

  this.empcount = this.employees.length;
  this.getFemaleCount();
  this.getMaleCount();
  }

  getMaleCount(): number {
   this.femalecount = this.employees.filter(e => e.gender === 'male').length;
  }

  getFemaleCount(): number {
   this.malecount = this.femalecount this.employees.filter(e => e.gender === 'female').length;
  }

  getfullName() {
    return this.firstName + ' ' + this.lastName;
  }

  onEmployeeCountRadioButtonChange(selectedRadioButtonValue: string){
  this.selectedEmployeeRadioButton = selectedRadioButtonValue;
  }
}

@Input和@Output在Angular 2

1 个答案: