javascript - 即使函数存在，Angular 也会抛出错误

Question

这个错误让我很困惑。尽管在 DocumentSservice 上有 addDocument 函数，但我不明白“typeof DocumentSservice”是什么意思。错误发生在函数 onSubmit() 上。我也刚刚开始学习 Angular，所以当它给我这些错误时我不太了解。

这是给我错误的 document-edit.component 文件。

import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { DocumentsService } from '../documents.service';
import { Document } from '../document.model'
import { NgForm } from '@angular/forms'

@Component({
  selector: 'cms-document-edit',
  templateUrl: './document-edit.component.html',
  styleUrls: ['./document-edit.component.css']
})
export class DocumentEditComponent implements OnInit {
  @ViewChild('f') dlForm: NgForm;
  id: string;
  originalDocument: Document;
  document: Document;
  editMode = false;
  addDocument: DocumentsService;

  constructor(private documentService: DocumentsService,
              private router: Router,
              private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params
      .subscribe(
        (params: Params) => {
          this.id = params['id'];
          // this.editMode = params['id'] != null;
          if (!this.id){
            this.editMode = false;
            return;
          }

          this.originalDocument = this.documentService.getDocument(this.id);

          if(!this.originalDocument){
           return;
          }

          this.editMode = true;

          this.document = JSON.parse(JSON.stringify(this.originalDocument));
  });
  }

  onSubmit(form:NgForm){
    const values = form.value;
    const newDocument = new Document(values.id, values.name, values.description, values.url);
    if (this.editMode = true){
      this.documentService.updateDocument(this.originalDocument, newDocument);
    }else{
      DocumentsService.addDocument.push(newDocument);
    }
    this.editMode = false;
    form.reset();
    this.onCancel();
    this.router.navigate['/documents'];
  }

  onCancel(){
    this.router.navigate(['/documents']);
  }
}

这是我的文档服务:

import { Injectable, EventEmitter } from '@angular/core';
import { MOCKDOCUMENTS } from './MOCKDOCUMENTS';
import { Document } from './document.model';
import { Subject } from 'rxjs';



@Injectable({
  providedIn: 'root'
})

export class DocumentsService {
  documentSelectedEvent = new EventEmitter<Document>();
  documentListChangedEvent = new Subject<Document[]>();
  documentsChanged = new Subject<Document[]>();
  maxDocumentId: number;
  documents: Document[] = [];
  id: number;

  constructor() {
    this.documents = MOCKDOCUMENTS;
    this.maxDocumentId = this.getMaxId();
  }


  getMaxId(): number{
   var maxId = 0;
    for(let document of this.documents){
     var currentId = document.id;
      if(+currentId > maxId){
       +maxId;
      }
    }
    return maxId;
  }

  getDocuments(): Document[] {
    return this.documents.slice();
  }
  getDocument(index: string) {
    return this.documents[index];
  }

  deleteDocument(document: Document) {
    if (document === null) {
      return;
    }

    const pos = this.documents.indexOf(document);
    if (pos < 0) {
      return;
    }

    this.documents.splice(pos, 1);
    this.documentListChangedEvent.next(this.documents.slice());
  }

  updateDocument(originalDocument: Document, newDocument: Document) {
    if (!originalDocument || !newDocument){
      return;
    }

    const pos = this.documents.indexOf(originalDocument);

    if ( pos < 0){
      return;
    }


    this.documents[pos] = newDocument;

  }

  addDocument(documents: Document[]) {


    this.documents.push(...documents);
    this.documentsChanged.next(this.documents.slice());
  }
}

正如您在我的文档服务应用程序中看到的那样，您可以清楚地看到该功能在那里。我也一直在到处寻找答案，但我没有找到任何答案。我是否必须创建一个全局变量才能添加该功能？还是因为我的 documentsService 服务组件的 addDocument() 函数中没有 newDocument？

Answer 1

你拥有它的方式:DocumentsService.addDocument.push(newDocument); 意味着，addDocument 是一个属性，而不是一个函数，并且是数组类型。两者都不是，因此错误。

您可能想要的是: 要么:

DocumentsService.getDocument().push(newDocument);

或者，

DocumentsService.addDocument([newDocument]);