组件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中获取参数，这就是为什么会出现错误。