Angular _this.exams.slice 不是函数 - 初始化时出现角度错误

Question

我在 Angular 上遇到一个错误，我不知道如何解决。

ERROR TypeError: _this.exams.slice is not a function
    at SafeSubscriber._next (exam.service.ts:17)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:79)

我正在尝试获取以下内容

考试服务

import { Exam } from '../models/exam.model';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({providedIn: 'root'})
export class ExamService {
  private exams: Exam[] = [];
  private examsUpdated = new Subject<Exam[]>();

  constructor(private httpClient: HttpClient) {}

  getExams() {
    this.httpClient.get<Exam[]>('http://localhost:3000/api/exam')
    .subscribe((examData) => {
      this.exams = examData;
      this.examsUpdated.next([...this.exams]);
    });
  }

  getExamsUpdateListener() {
    return this.examsUpdated.asObservable();
  }

  addExam(
    question: string,
    answer1: string,
    answer2: string,
    answer3: string,
    answer4: string,
    difficulty: string,
    year: string,
    subject: string) {
    const exam: Exam = {
      id: null,
      question: question,
      answer1: answer1,
      answer2: answer2,
      answer3: answer3,
      answer4: answer4,
      difficulty: difficulty,
      year: year,
      subject: subject,
    };
    this.httpClient.post<{message: string}>('http://localhost:3000/api/exam', exam)
      .subscribe((responseData) => {
        console.log(responseData.message);
        this.exams.push(exam);
        this.examsUpdated.next([...this.exams]);
      });
  }
}

快递中间件

app.get("/api/exam", (req, res, next) =>{
  Exam.find().then(documents => {
    res.status(200).json({
      exams: documents
    })
  })
});

角度组件

  exams: Exam[] = [];
  private examSubscription: Subscription;

  constructor(public examService: ExamService) {}

  ngOnInit() {
    this.examService.getExams();
    this.examSubscription = this.examService.getExamsUpdateListener().subscribe((exams: Exam[]) => {
      this.exams = exams;
    });
  }

考试架构

const mongoose = require('mongoose');

const examSchema = mongoose.Schema({
  question: {type: String, required: true},
  answer1: String,
  answer2: String,
  answer3: String,
  answer4: String,
  difficulty: String,
  year: String,
  subject: String,
});

module.exports = mongoose.model('Exam', examSchema);

当我尝试在组件初始化时提取数据时会发生这种情况。 把 Express 中间件改成下面这样会在控制台收集 MongoDB，所以看起来和中间件有那么大的关系。

app.get("/api/exam", (req, res, next) =>{
  Exam.find().then(documents => {
    console.log(documents)
    })
  })

希望您能看到问题所在，否则我可以提供更多信息！谢谢

Answer 1

只需替换下面的sn-ps

this.examsUpdated.next([...this.exams]);

由

this.examsUpdated.next(this.exams);