从Angular2组件传递Json到Node.js

时间:2016-11-19 21:21:21

标签: javascript json node.js angular

我正在尝试将数据从Angular2和Node.js

插入数据库

当我运行我的脚本时我console.log(this.address);以确保我传递json,这是控制台的输出。

Address {street: "1111 NW 40TH AVE", city: "MIAMI", state: "Florida", zip: "33167"}

但是记录没有进入数据库。我知道我有联系,但我在这里遗漏了一些东西,不知道怎么从这里开始麻烦。

在组件中,这是http.post

 addressSubmit() { 
      this.addressSubmitted = true; 
      var headers = new Headers();
      headers.append('Content-Type', 'application/json');
      this.http
      .post('http://localhost:4200/profile/addAddress', this.address, { headers: headers })
      .map(response => response.json());
      console.log(this.address);
  }

所以使用该函数我知道我有一个似乎正在传递json的函数。

然后在节点的后端我收到这样的json,

addAddress: function(req, res) {
        pool.connect(function(err, client, done) {
            if (err) {
                return console.error('error fetching client from pool', err);
            } // end of error catch while creating pool connection

            var query = client.query("insert into address (street, city, state, zip) " +
            "values ('" + req.query.street + "','" + req.query.city + "','" +
            req.query.state + "','" + req.query.zip + "')"); // create the query

            query.on("end", function(result) {
                client.end();
                res.write('Success');
                res.end();
            }); // handle the query
            done(); // release the client back to the pool
        }); // end of pool connection
        pool.on('error', function(err, client) { 
                console.error('idle client error', err.message, err.stack) 
            }); // handle any error with the pool
    } // End addAddress function

处理这样的路线,

router.get('/profile/addAddress', connection.addAddress);

在app.js

app.get('/profile/addAddress', function(req,res){
    db.addAddress(req,res);
});

所以在这一点上。我知道我要经过json。我知道我有与数据库的连接。我可以通过手动输入并转到express route来检索条目并将其输出到浏览器。

我只是错过了从angular2node来回传递数据。然后从node返回angular2

现在借助echonax回答我在网络选项卡

下的查询字符串中有这个

查询字符串参数

street:11700 NW 36TH AVE
city:MIAMI
state:Florida
zip:33167

1 个答案:

答案 0 :(得分:2)

我认为你没有向你的后端提出请求。

你的

this.http
      .post('http://localhost:4200/profile/addAddress', this.address, { headers: headers })
      .map(response => response.json());

行返回一个Observable,只有在订阅时才会调用此observable。

所以让你的addressSubmit()像这样返回这个观察点:

 addressSubmit() { 
      this.addressSubmitted = true; 
      var headers = new Headers();
      headers.append('Content-Type', 'application/json');
      return this.http
      .post('http://localhost:4200/profile/addAddress', this.address, { headers: headers })
      .map(response => response.json());
  }

然后在你的代码中调用它:

this.addressSubmit().subscribe((response)=>{
    //do something with the response here
    console.log(response);
})