即使函数存在，角度也会引发错误

Question

This error is getting me stumped. Even though the addDocument function is there on DocumentSservice, I do not understand what it means by 'typeof DocumentSservice'. The error is happening on the function onSubmit(). I am also just learning Angular too, so I don't know a whole lot when it gives me those kind of errors.

This is the document-edit.component file that is giving me errors.

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']);
  }
}

This is my documentsService:

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());
  }
}

As you can see in my service app for my documents, you can clearly see that the function is there. I also have been looking everywhere for an answer but I didn't find any. Do I have to make a global variable to add the function? Or is it because I don't have newDocument in my addDocument() function in my documentsService service component?

Answer 1

The way you have it: DocumentsService.addDocument.push(newDocument); means that, addDocument is a property, not a function and is of type array. Neither is the case, therefore the error.

What you may want is: either:

DocumentsService.getDocument().push(newDocument);

Or,

DocumentsService.addDocument([newDocument]);