时间戳

首页 > 解决方案 > 组件EmployeeCreateComponent的模板出现错误

node.js - 组件EmployeeCreateComponent的模板出现错误

问题描述

我是 Angular 的新手，正在httpclient开发httpserviceCRUD 应用程序。在 VS 代码中编译时ng serve出现以下错误：

错误：src/app/employee-create/employee-create.component.html:18:65 中的错误 - 错误 TS2554：预期 1 个参数，但得到 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>

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

}

标签： node.jsangularangular-httpclient

解决方案

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

(click)="addEmployee()"

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

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

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

推荐阅读