首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Angular _this.exams.slice不是函数-初始化时出现Angular错误

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

Stack Overflow用户
提问于 2018-10-21 04:34:06
回答 1查看 958关注 0票数 0

我遇到了一个关于角度的错误,我不知道如何解决。

代码语言:javascript
运行
复制
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)

我正在尝试获取以下内容

Exam.service

代码语言:javascript
运行
复制
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]);
      });
  }
}

Express中间件

代码语言:javascript
运行
复制
app.get("/api/exam", (req, res, next) =>{
  Exam.find().then(documents => {
    res.status(200).json({
      exams: documents
    })
  })
});

角度分量

代码语言:javascript
运行
复制
  exams: Exam[] = [];
  private examSubscription: Subscription;

  constructor(public examService: ExamService) {}

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

考试方案

代码语言:javascript
运行
复制
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,因此它似乎与中间件相关。

代码语言:javascript
运行
复制
app.get("/api/exam", (req, res, next) =>{
  Exam.find().then(documents => {
    console.log(documents)
    })
  })

希望你能看到哪里出了问题,否则我可以提供更多的信息!谢谢

EN

回答 1

Stack Overflow用户

发布于 2018-10-21 04:51:54

只需替换以下代码片段

代码语言:javascript
运行
复制
this.examsUpdated.next([...this.exams]);

通过

代码语言:javascript
运行
复制
this.examsUpdated.next(this.exams);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52909884

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档