如何使用Angular2和Typescript将数组发送到Web api

时间:2017-11-09 07:18:50

标签: angular typescript

我无法使用Angular2将数组发送到web api。在我的打字稿中,我用这个打电话给api:

apiData(command?: string | null, array?: string[] | null): Observable<void> {
    //let url_ = this.baseUrl + "/api/Data/command?";
    let url_ = "/api/Data/command?";

    if (command !== undefined)
        url_ += "command=" + encodeURIComponent("" + command) + "&";
    url_ = url_.replace(/[?&]$/, "");

    //const content_ = JSON.stringify(array);

    if (array !== undefined)
        array && array.forEach(item => { url_ += "array=" + encodeURIComponent("" + item) + "&"; });



    let options_: any = {
        //data: content_,
        method: "post",
        headers: new Headers({
            "Content-Type": "application/json",
        })
    };

Api看起来像这样:

    [Produces(typeof(void))]
    [HttpPost("command")]
    public HttpResponseMessage PostData(string command, string[] array)
    {

当使用上面的例子时,api在数组中接收正确数量的行,但它们都是“[object Object]”。

如果我使用JSON.stringify(数组)并将其作为数据发送:(在我的示例中注释掉)web api只获取一个空字符串。我发送的数组是JSON。

这种方法适用于Angularjs,但出于某种原因,我无法使其发挥作用。

2 个答案:

答案 0 :(得分:0)

您可以在服务中使用Post方法。

constructor(private _http: Http){}
apiData(command?: string | null, array?: string[] | null): Observable<void> {

// your code
return this._http.post(url, array, options)
.map(
   // response logic
)
.catch(
  // exception handling
);
}

你的组件:

constructor(private _service : AboveServiceComponent)
getStatusofSentData(){
this._service.subscribe(
res => {
// get response
},
err => {
// handle error if any
}
)
}

答案 1 :(得分:0)

你可以尝试这样使用。

apiData(command?: string | null, array?: string[] | null): Observable<void> {
  //let url_ = this.baseUrl + "/api/Data/command?";
  let url_ = "/api/Data/command?";

  if (command !== undefined)
      url_ += "command=" + encodeURIComponent("" + command) + "&";
  url_ = url_.replace(/[?&]$/, "");

  //const content_ = JSON.stringify(array);

  let data: any = { command: url_, array: array};

  let options_: any = {
    data: JSON.stringify(data),
    method: "post",
    headers: new Headers({
        "Content-Type": "application/json",
    })
};