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

时间:2019-03-01 18:01:06

标签: javascript angular

此错误使我感到困惑。即使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']);
  }
}

这是我的documentService:

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服务组件的newDocument函数中没有addDocument()

1 个答案:

答案 0 :(得分:2)

您拥有的方式:DocumentsService.addDocument.push(newDocument);表示addDocument是属性,而不是函数,并且是数组类型。都不是,因此是错误。

您可能想要的是: 之一:

DocumentsService.getDocument().push(newDocument);

或者

DocumentsService.addDocument([newDocument]);