angular 10 订阅 http.get 不工作

Question

我在 Node.js 中创建了后端，在 angular2+ 中创建了前端。 我想做一个简单的待办事项列表。 我做了一个 GET、POST 和 DELETE 方法，这些方法都可以正常工作。 问题是当我订阅我的getTodos function 时，同时通过 POST 或 DELETE 更改 todosList 时，我没有得到任何更新。

这是 todo.service.ts 的代码

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Observable } from 'rxjs';
    import { Todo } from '../models/todo.model';

    @Injectable()
    export class TodoService {
      constructor(private http: HttpClient) { }

      getTodos(): Observable<Todo[]> {
        const baseUrl = 'http://localhost:3000/'
        const todoUrl = 'api/todo'
        return this.http.get<Todo[]>(baseUrl + todoUrl)
      } 
    }

有 typescript 代码 app.component.ts

    const baseUrl = 'http://localhost:3000/'

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
      providers: [ TodoService ]
    })
    export class AppComponent implements OnInit {
      title = 'todo';
      taskHeader = ['User', 'Todo', 'Is done', 'Has attachment']
      todos: Todo[];

      constructor(private http: HttpClient, private todoService: TodoService) {}

      ngOnInit() {
        this.todoService.getTodos()
          .subscribe((res) =>  {this.todos = res
          console.log('this.todos', this.todos)}
        )
      }

      send(data) {
        const addUserUrl = 'api/todo'
        
        let addUserHeaders = new HttpHeaders().append('Content-Type', 'application/json');

        const todo: Todo = {
          userName: 'test',
          todo: data,
          isDone: true,
          hasAttachment: false
        }
        
        this.http.post(baseUrl + addUserUrl, todo,  {headers: addUserHeaders, responseType: 'text'}).subscribe((x) => console.log(x) )
      }  
      
      deleteTask(todoId) {
        const addUserUrl = 'api/todo'
        this.http.delete(`${baseUrl}${addUserUrl}/${todoId} `, {responseType: 'text'}).subscribe((s) => {
          console.log(s);
        })
      }
    }

这是 api.controller.js

    module.exports = (app) => {
      app.use(bodyParser.json())
      app.use(bodyParser.urlencoded({ extended: true }))

      app.get('/api/todo', (req, res) => {
        Todos.find({}).then(function (todos) {
          res.send(todos);
        });
      })

      app.post('/api/todo', (req, res) => {
        if (req.body.id) {
          Todos.findByIdAndUpdate(req.body.id, {
            todo: req.body.todo, isDone:
            req.body.isDone, hasAttachment:
            req.body.hasAttachment
          }, 
          (err, todo) => {
            if (err) throw err
            res.send('Post Success')
          })
        }

        else {
          const newTodo = Todos({
            userName: req.body.userName,
            todo: req.body.todo,
            isDone: req.body.isDone,
            hasAttachment: req.body.hasAttachment
          })
          newTodo.save((err) => {
            if (err) throw err
            res.send('Post Success')
          })
        }    
      });

      app.delete('/api/todo/:id', (req,res) => {
        Todos.findByIdAndRemove(req.params.id, (err) => {
          if (err) throw err
          res.send('Delete Success')
        })
      })
    }

Answer 1

Subscribe不像你想象的那样工作。 如果您订阅getTodos ，请求会被发送一次，您会收到响应，仅此而已。 当有发布/删除请求时，不再有任何连接会收到有关数据库中任何更改的通知。

你有几个选择：

• 每当您发出发布/删除请求而不是发送Post Success或Delete Success作为响应时，您都会发送数据库内容。
• 在成功发布/删除请求后，您修改前端中的数据
• 您使用 websockets 作为前端和后端之间的稳定连接。 这个选项接近你认为subscribe的工作方式

我个人会实施第一个或第二个选项。