如何解决组件EmployeeCreateComponent的模板中发生错误
我是Angular的新手,正在从事CRUD应用程序的httpclient
和httpservice
项目。在VS代码中使用ng serve
进行编译时,出现以下错误:
错误:src / app / employee-create / employee-create.component.html:18:65中出现错误-错误TS2554:预期有1个参数,但得到0。
employee-create.component.html
<div class="container custom-container">
<div class="col-md-12">
<h3 class="mb-3 text-center">Create Employee</h3>
<div class="form-group">
<input type="text" [(ngModel)]="employeeDetails.name" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="text" [(ngModel)]="employeeDetails.email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="text" [(ngModel)]="employeeDetails.phone" class="form-control" placeholder="Phone">
</div>
<div class="form-group">
<button class="btn btn-success btn-lg btn-block" (click)="addEmployee()">Create Employee</button>
</div>
</div>
</div>
员工创建组件。ts
import { Component,OnInit,Input } from '@angular/core';
import { Router } from '@angular/router';
import { RestApiService } from "../shared/rest-api.service";
@Component({
selector: 'app-employee-create',templateUrl: './employee-create.component.html',styleUrls: ['./employee-create.component.css']
})
export class EmployeeCreateComponent implements OnInit {
@input() employeeDetails = { name: '',email: '',phone: 0 }
constructor(
public restApi: RestApiService,public router: Router
) { }
ngOnInit() { }
addEmployee() {
this.restApi.createEmployee(this.employeeDetails).subscribe((data: {}) => {
this.router.navigate(['/employees-list'])
})
}
}
解决方法
单击按钮时模板addEmployee()
方法中的错误很明显,没有任何参数。
(click)="addEmployee()"
但是在您的组件中,您正在通过dataEmployee
方法(看起来好像没有使用)传递addEmployee(dataEmployee)
参数。
因此,您可以从dataEmployee
方法中删除addEmployee()
参数。
addEmployee() { // <=== no dataEmployee param
this.restApi.createEmployee(this.employeeDetails).subscribe((data: {}) => {
this.router.navigate(['/employees-list'])
})
}
,
addEmployee() { // <=== dataEmployee Parameter this.restApi.createEmployee(this.employeeDetails).subscribe((data: {}) => {
this.router.navigate(['/employees-list'])
})
}
您没有在HTML文件中传递参数,而是试图在ts中获取参数,这就是为什么会出现错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。