当我在 MEAN STACK 中提交表单时没有任何反应[重复]

Question

所以这个项目是如此简单。用户输入有关一本书的一些信息，然后单击提交以将信息保存在数据库（Mongodb）中，我正在使用 MEAN STACK 并且我是菜鸟（显然）。当我提交甚至没有错误时，什么也没有发生。

后端代码：

    //POST ONE BOOK
    booksRoute.route('/post').post((req,res,next)=>{
        var x = {
            name   : req.params.name,
            genre  : req.params.genre,   
            author : req.params.author,
            rating : req.params.rating,
            price  : req.params.price
        }
        console.log(x) ; 
        BookModel(x).save((err,data)=>{
            if (err){console.log(err);}
            else res.send(data) ;
}) ;
})

添加书籍组件html：

<ul>
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">  
    <li>
    <label>book's name *</label>
    <input name="name" type="text" ngModel>
    </li>
    <li>
    <label>book's genre *</label>
    <input name="genre" type="text" ngModel>
    </li>
    <li>
    <label>book's author *</label>
    <input name="author" type="text" ngModel>
    </li>
    <li>
    <label>rating *</label>
    <input name="rating" type="number" [max]="10" min="0" ngModel>
    </li>
    <li>
    <label>price *</label>
    <input name="price" type="number" ngModel>
    <input class="btn btn-primary" type="submit"/> 
    </li>  
</form>
</ul>

角度服务

  postBook(data){
    console.log(data) ;
    return this.http.post(this.backendUrl+'/post',data) ;
  }

在 addBook 组件中

onSubmit(f){
    //console.log(f.value) ;
    this.apiService.postBook(f.value) ; 
  }

注意：我可以从数据库中获取数据，我可以通过它的名字找到一本书，但我不能发布

Answer 1

我猜您需要订阅您的 API/back 的响应，如下所示：

onSubmit(f){
    //console.log(f.value) ;
    this.apiService.postBook(f.value)
    .subscribe( res => {
     console.log('The back response:', res);
    }); 
}

除非您不订阅对 API 进行 http 调用 的 observable，否则不会“启动”http 调用过程。