How pass array in angular 2 service to an asp.net web API?

Question

I have checkboxes in angular 2 view side, and when I click one of the checkboxes and click the button I get values of the selected checkbox.And this value or id I pass into service and call my asp.net Web API, Here is my view

<div>
    <label>
         <input class="checkbox" type="checkbox" name="cbox1" value="1" >Armani                                             
    </label>           
    <label>
         <input class="checkbox" type="checkbox" name="cbox1" value="2" >Versace
    </label>
    <button type="submit" id="select" class="btn btn-default btn-sm btn-primary">Apply</button>
</div>

In my component

  var self = this;            
            $(document).ready(function () {                                                         
              $('#select').click(function () {
                   var seletedId = new Array();
                    $('input:checkbox.checkbox').each(function () {
                        if ($(this).prop('checked')) {
                                       seletedId.push($(this).val());                                      
                                    }
                                    });
                                    if (seletedId.length > 0) {
                                        self.getProductBrand(seletedId);
                                    }
                                })                            
                            });

With this i call function

 getProductBrand(ids: Array<number>) {           
            this._productService.getProductBrand(ids).subscribe(data => {
                console.log();
            }, error => { this.errorMessage = error });
        }

In Web API

[HttpGet]        
[Route("api/user/brand/{id}")]
public Producttbl getProduBrand([FromUri] int[] id)
{
     //
}

So how to pass an array from angular 2 and how to fetch in web API? Through above code, it gets error like zone.js:2935 GET

http://localhost:58266/api/user/productbybrand/1,2 404 not found

Answer 1

First, create array in typescript

seletedIds = new Array();
and then assign jquery array to an typescript array and pass to the web API

var self = this;            
                        $(document).ready(function () {                                                         
                            $('#select').click(function () {
                                var seletedId = new Array();
                                $('input:checkbox.checkbox').each(function () {
                                    if ($(this).prop('checked')) {
                                        seletedId.push($(this).val());                                      
                                   }
                                });
                                if (seletedId.length > 0) {
                                    self.getProductBrand(seletedId);
                                    self.seletedIds = seletedId;
                                    console.log(self.seletedIds);
                                }
                            })                            
                        });

and after change in my web API HttpGet to HttpPost and it's worked.