组件的模板中发生错误 员工详细信息组件

Question

我是 Angular 的新手，并试图使用此链接构建一个小的 crud 应用程序

https://overflowjs.com/posts/Angular-8-Understanding-Directory-Structure-and-Creating-CRUD-App.html

我已经完全按照上面提到的做了。我收到一个我似乎无法理解的错误。 错误如下：

ERROR in src/app/employeedetail/employeedetail.component.html:7:110 - error TS2554: Expected 1 
arguments, but got 0.
<button pButton type="button" label="Delete" icon="pi pi-times" class="ui-button-secondary" 
(click)="deleteEmployee()"></button>   
~~~~~~~~~~~~~~
src/app/employeedetail/employeedetail.component.ts:8:16
8   templateUrl: './employeedetail.component.html'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component EmployeedetailComponent.

共享我的文件： EmployeeDetail.component.ts ：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Employee } from 'src/entity/employee';
import { Router } from '@angular/router
import { EmployeeserviceService } from '../services/employeeservice.service';
@Component({
selector: 'app-employeedetail',
templateUrl: './employeedetail.component.html'
})
export class EmployeedetailComponent  {
// Input variable to display properties of an employee
@Input() employee: Employee;
// Output variable used to tell the parent component to refesh the employee list after successful 
delete
@Output() refreshEmployeeList: EventEmitter<boolean> = new EventEmitter<boolean>();

// Service injected in constructor
constructor(private employeeService: EmployeeserviceService, private router: Router) { 
}
// Method to edit employee details
editEmployee(){
this.router.navigate(["EditEmployee/"+ this.employee.id]);
}

deleteEmployee(employeeToBeDeleted: Employee){
var result = confirm("Are you sure, you want to delete this Employee?");
if (result) {
this.employeeService.deleteEmployee(this.employee.id);
this.refreshEmployeeList.emit(true);
this.router.navigate(["Employees"]);
} 

}
}

Employeedetail.Component.html

<p-card [style]="{width: '360px'}" styleClass="ui-card-shadow">
<div>{{employee.firstname}} {{employee.lastname}}</div>
<div>Age: {{employee.age}} Years</div>
<div>{{employee.designation}}</div>
<footer>
<button pButton type="button" label="Edit" icon="pi pi-check" style="margin-right: .25em" 
(click)="editEmployee()"></button>
<button pButton type="button" label="Delete" icon="pi pi-times" class="ui-button-secondary" 
(click)="deleteEmployee()"></button>
</footer>
</p-card>

如果您想查看更多文件，请访问上述链接。 任何人都可以帮助我解决此错误吗？

Answer 1

这是因为您已将该方法定义为：

deleteEmployee(employeeToBeDeleted: Employee) {
... 
}

但是调用它而不传递参数。将参数传递给函数，如下所示：

<button pButton type="button" label="Delete" icon="pi pi-times" 
class="ui-button-secondary" 
(click)="deleteEmployee(employee)">             <-- change made here
</button>

Answer 2

查看您的方法deleteEmployee签名。您的方法期望获取类型Employee的参数，但在模板中您没有提供任何参数。您必须删除此参数或将其传递到模板中。

此外，不要使用var来声明变量。如果要更改值，请使用let，如果不更改值，请使用const值。

Answer 3

您的deleteEmployee method.pass 参数中存在问题，它将被修复。