时间戳

首页 > 解决方案 > 如何将相同对象的属性传递给 Angular 中的函数？

angular - 如何将相同对象的属性传递给 Angular 中的函数？

问题描述

我有一个员工界面，如下所示

export interface IEmployee {
    name: string;
    id: number;
    annualSalary: number;
    calculateMonthlySalary(annualSalary: number): number;
}

实现上述接口的组件

import { Component, OnInit } from '@angular/core';
import { IEmployee } from './../employee';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit, IEmployee {

  employees: IEmployee[];

  constructor() {
    this.employees = [
      {name: 'john', id: 1, annualSalary: 90000, calculateMonthlySalary: this.calculateMonthlySalary(annualSalary) }
    ];
  }

  calculateMonthlySalary(annualSalary: number): any {
    return annualSalary / 12;
  }

}

在这里，我正在尝试使用接口方法计算月薪，calculateMonthlySalary并尝试在视图中显示*ngFor但低于错误

ERROR ReferenceError: annualSalary is not defined

请纠正我做错的地方

标签： angulartypescript

解决方案

试试这样：

工作演示 1

this.employees = [
  {name: 'john', id: 1, annualSalary: 90000, calculateMonthlySalary: this.calculateMonthlySalary(90000) }
];

将 IEmployee 类型的对象添加到数组时，对象本身不理解annualSalary，所以必须在calculateMonthlySalary()函数中添加

要动态执行此操作，您可以创建一个 Employee 类：

工作演示 2

export class Employee {
  name: string;
  id: number;
  annualSalary: number;
  monthlySalary:number
  constructor(name: string, id: number, annualSalary: number) {
    this.name = name,
    this.id = id,
    this.annualSalary = annualSalary,
    this.monthlySalary = this.calculateMonthlySalary(annualSalary)

 }

 calculateMonthlySalary(annualSalary: number): any {
    return annualSalary / 12;
 }
}

并像这样使用它：

employees: Employee[];

  constructor() {
    this.employees = [
      new Employee('John',1,90000)
    ];
  }

模板：

<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>MonthlySalary</th>
    </tr>
    <tr *ngFor="let item of employees">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.monthlySalary}}</td>
    </tr>
</table>

推荐阅读