core.js:6210 ERROR TypeError: this.service.addDepartment is not a function

Question

当我尝试在我正在构建的 Web 应用程序上按下 'Add' 按钮时出现此错误。

core.js:6210 ERROR TypeError: this.service.addDepartment is not a function
at AddEditDepComponent.addDepartment (add-edit-dep.component.ts:25)
at AddEditDepComponent_button_5_Template_button_click_0_listener (add-edit-dep.component.html:10)
at executeListenerWithErrorHandling (core.js:15265)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:15303)
at HTMLButtonElement.<anonymous> (platform-browser.js:582)
at ZoneDelegate.invokeTask (zone-evergreen.js:406)
at Object.onInvokeTask (core.js:28540)
at ZoneDelegate.invokeTask (zone-evergreen.js:405)
at Zone.runTask (zone-evergreen.js:178)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:487)

我不太清楚问题出在哪里。函数 addDepartment 对我来说看起来不错，但错误肯定存在。

添加-编辑-dep.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { SharedService } from 'src/app/shared.service';

@Component({
  selector: 'app-add-edit-dep',
  templateUrl: './add-edit-dep.component.html',
  styleUrls: ['./add-edit-dep.component.css']
})
export class AddEditDepComponent implements OnInit {

  constructor(private service : SharedService) { }

  @Input() dep: any;
  DepartmentId!:string;
  DepartmentName!:string;

  ngOnInit(): void {
    this.DepartmentId = this.dep.DepartmentId;
    this.DepartmentName = this.dep.DepartmentName;
  }

  addDepartment() {
    var val = {DepartmentId:this.DepartmentId,
                DepartmentName:this.DepartmentName};
    this.service.addDepartment(val).subscribe((res: { toString: () => any; })=>{
      alert(res.toString());
    });
  }

  updateDepartment() {
    var val = {DepartmentId:this.DepartmentId,
                DepartmentName:this.DepartmentName};
    this.service.updateDepartment(val).subscribe((res: { toString: () => any; })=>{
      alert(res.toString());
    });

  }
}

我认为它与 'res' 有关，因为我收到错误（res 是隐式任何类型）并使用 VS Code 中的 QuickFix 修复它。但是updateDepartment函数基本一致，都可以正常使用，不知道是什么问题

我已经包含了我今天处理的所有文件。如果有任何帮助，我将不胜感激。

显示-dep.component.html

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary float-right m-2" 
data-bs-toggle="modal" data-bs-target="#exampleModal"
(click)="addClick()"
data-backdrop="static" data-keyboard="false">
  Add Department
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{ModalTitle}}</h5>
        <button type="button" class="btn-close" 
        data-bs-dismiss="modal" aria-label="Close"
        (click)="closeClick()" >
        </button>
      </div>
      <div class="modal-body">
        <app-add-edit-dep
          [dep]="dep" *ngIf="ActivateAddEditDepComp">
        </app-add-edit-dep>
      </div>
    </div>
  </div>
</div>

<table class = "table table-striped"> 
    <thead>
        <tr>
            <th>Department ID</th>
            <th>Department Name</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor = "let dataItem of DepartmentList">
            <td>{{dataItem.DepartmentId}}</td>
            <td>{{dataItem.DepartmentName}}</td>
            <td>
                <button type="button" class = "btn btn-light mr-1"
                data-bs-toggle="modal" data-bs-target="#exampleModal"
                (click)="editClick(dataItem)"
                data-backdrop="static" data-keyboard="false">
                    Edit
                </button>
                <button type="button" class = "btn btn-light mr-1">
                    Delete
                </button>
            </td>
        </tr>
    </tbody>

</table>

add.edit-dep.component.html

<div class = "form-froup row">

    <label class = "col-sm-2 col-form-label"> Department Name </label>
    <div class = "col-sm-10">
        <input type = "text" class = "form-control" [(ngModel)] = "DepartmentName"
        placeholder = "Enter department name">
    </div>
</div>

<button (click) = "addDepartment()" *ngIf = "dep.DepartmentId == 0" class = "btn btn-primary">
    Add
</button>

<button (click) = "updateDepartment()" *ngIf = "dep.DepartmentId != 0" class = "btn btn-primary">
    Update
</button>

shared.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  [x: string]: any;

  readonly APIUrl = "http://localhost:59281/api";
  readonly PhotoUrl = "http://localhost:59281/Photos";

  constructor(private http:HttpClient) { }

  getDepList():Observable<any[]> {

    return this.http.get<any>(this.APIUrl + '/Department');
  }

  getDepartment(val:any) {
    return this.http.post(this.APIUrl + '/Department', val);
  }

  updateDepartment(val:any) {
    return this.http.put(this.APIUrl + '/Department', val);
  }

  deleteDepartment(val:any) {
    return this.http.delete(this.APIUrl + '/Department/' + val);
  }

  getEmpList():Observable<any[]> {

    return this.http.get<any>(this.APIUrl + '/Employee');
  }

  getEmployee(val:any) {
    return this.http.post(this.APIUrl + '/Employee', val);
  }

  updateEmployee(val:any) {
    return this.http.put(this.APIUrl + '/Employee', val);
  }

  deleteEmployee(val:any) {
    return this.http.delete(this.APIUrl + '/Employee/' + val);
  }

  UploadPhoto(val:any) {
    return this.http.post(this.APIUrl + 'Employee/SaveFile', val);
  }

  getAllDepartmentNames():Observable<any[]> {
    return this.http.get<any[]>(this.APIUrl + '/Employee/GetAllDepartmentNames');
  }

}

Answer 1

您的 SharedService class 中没有 addDepartment(val:any) 函数，这是错误消息指向正确位置的情况之一。

您正在 AddEditDepComponent

的 addDepartment() 方法中调用 this.service.addDepartment(val)

core.js:6210 ERROR TypeError: this.service.addDepartment is not a function

core.js:6210 ERROR TypeError: this.service.addDepartment is not a function

javascript

bootstrap-modal

angular10