Question

嗨，我过去两天一直在研究这个问题，但无法弄清楚我的错误在哪里。我有一个简单的html表单，当我单击添加按钮时，它应该将我的输入添加到mongo数据库，然后在网站上显示它。但是，我得到的.subscribe不是函数TypeError。

这是我的第一个MEAN堆栈应用程序，所以这对我来说都是新手。如果有任何其他信息我可能会遗漏，请告诉我。我试图使用我从angular.io教程中学到的有关我的角度代码的信息和我的综合MEAN堆栈应用程序的另一个教程。我发现我的MEAN堆栈教程使用了过时的角度语法，所以我想知道我的问题是不是。

dashboard.component.html

<div class="add">
    <input class="newItem" #newListInput type="text" [(ngModel)]="input" placeholder="Enter new items here">
    <!-- (click) passes input value to addList() and then clears the input -->
    <button id="addListButton" (click)="addList(newListInput.value); newListInput.value=''">Add</button>
  </div>

dashboard.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { FlashMessagesService } from 'angular2-flash-messages';
import { ListService } from '../../services/list.service';
import { List } from '../../list';
export class DashboardComponent implements OnInit {
  user: Object;

  lists: List[];

  @Input() input;

  @Output() update = new EventEmitter();

  constructor(
    private authService: AuthService,
    private flashMessage: FlashMessagesService,
    private listService: ListService
  ) { }

  ngOnInit() {
    this.authService.getProfile().subscribe(profile => {
      this.user = profile.user;
    },
    err => {
      console.log(err);
      return false;
    });
  }

  getLists(): void {
    this.listService.getAllTodos()
      .subscribe(list => this.lists = list);
  }

  addList(newItem): void {
    const newTodo = { item: newItem, completed: false };
      this.listService.addItem(newTodo).subscribe(data => {
          this.lists.push(data);
      });
  }

list.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

import { List } from '../list';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class ListService {

  constructor(private http: HttpClient) { }

  getAllTodos(): Observable<List[]> {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.get<List[]>('http://localhost:3000/todos/lists')
  }

  addItem(newTodo) {
    return this.http.post('http://localhost:3000/todos/dashboard'), newTodo, httpOptions)
      .map(res => res.json());
  } 
}

TypeError：this.listService.addItem（...）。subscribe不是函数

0 个答案: