组件EmployeeCreateComponent模板出错

Question

我是 Angular 的新手，正在从事 CRUD 应用程序的 httpclient 和 httpservice 项目。在 VS 代码中使用 ng serve 编译时出现以下错误：

error: ERROR in src/app/employee-create/employee-create.component.html:18:65 - error TS2554: Expected 1 arguments, but got 0.

员工-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>

员工创建component.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'])
    })
  }

}

Answer 1

您的模板中的错误很明显 addEmployee() 单击按钮的方法没有任何参数。

(click)="addEmployee()"

但是在您的组件中，您正在 addEmployee(dataEmployee) 方法中传递 dataEmployee 参数（看起来未使用）。

因此您可以从 addEmployee() 方法中删除 dataEmployee 参数。

addEmployee() { // <=== no dataEmployee param
  this.restApi.createEmployee(this.employeeDetails).subscribe((data: {}) => {
    this.router.navigate(['/employees-list'])
  })
}

Answer 2

addEmployee() { // <=== dataEmployee Parameter     this.restApi.createEmployee(this.employeeDetails).subscribe((data: {}) => {
    this.router.navigate(['/employees-list'])
  })
}

您没有在 Html 文件中传递参数，但您试图在 ts 中获取参数，这就是您收到错误的原因。

组件EmployeeCreateComponent模板出错

Error occurs in the template of component EmployeeCreateComponent

node.js

angular

angular-httpclient