Не запускает веб-API из Angular 5

Question

Я вложил свои Component.ts, service.TS и AND в Web Api.Можете ли вы помочь мне получить данные от SP.Я использую MVC.Это мой component.ts

GetComponentListForGrid() {this._componentservice.getAllComponentList(this.compartid_auto,this.progid,this.ComponentId,this.ComponentDescription,this.ComponentType,
        this.ComponentMake,this.EquipModel).subscribe(result => {
          console.log('GetAvailableCompartsAll', result);
          this._componentList.push(...result);
      }, error => { }, () => { this._loading.startLoading(); });
    }

Это Service.ts

public getAllComponentList(compartid_auto :string, progid :string,ComponentId :string,ComponentDescription:string,ComponentType:string,ComponentMake :string,EquipModel:string): Observable<ComponentList[]> {
        let options = {
          params: new HttpParams().set('compartid_auto', compartid_auto).set('progid', progid)
          .set('ComponentId', ComponentId).set('ComponentDescription', ComponentDescription)
          .set('ComponentType', ComponentType).set('ComponentMake', ComponentMake)
          .set('EquipModel', EquipModel)
        };
        return this._http.get("api/Component/getComponents", options).pipe(catchError(this.handleError));
      }

Это мой Web API

        [HttpPost]
        [ResponseType(typeof(List<Component_Details>))]
        public IHttpActionResult GetComponents(int module, string compID, string compDesc, string compType, string equipMake, string equipModel, string compMake, string compSize)
        {
            Component_Details c = new Component_Details();
            List<Component_Details> compList = new List<Component_Details>();
            DataTable dt = Component.getCompartmentList(module, compID, compDesc, compType, equipMake, equipModel, compMake, 0);
            foreach (DataRow dr in dt.Rows)
            {
                c.compartid_auto = dr["compartid_auto"].ToString();
                c.progid = dr["progid"].ToString();
                c.ComponentId = dr["CompID"].ToString();
                c.ComponentDescription = dr["CompDesc"].ToString();
                c.ComponentType = dr["CompType"].ToString();
                if (dr.ItemArray.Length > 5)
                    c.ComponentMake = dr["CompMake"].ToString();
                else
                    c.ComponentMake = string.Empty;
                if (dr.ItemArray.Length > 6)
                    c.EquipModel = dr["EquipModel"].ToString();
                else
                    c.EquipModel = string.Empty;

                compList.Add(c);
            }
             return Ok(compList);
        }

Я получаю данные из хранимой процедуры

public static DataTable getCompartmentList(int module, string compID, string compDesc, string compType, string equipMake, string equipModel, string compMake, int compSize)
        {
            string cnnString = System.Configuration.ConfigurationManager.ConnectionStrings["TTDALConnection"].ConnectionString;
            DataTable dt = null;
            try
            {
                SqlConnection cnn = new SqlConnection(cnnString);
                SqlCommand cmd = new SqlCommand("store_procedure_name", cnn);
                cmd.CommandType = System.Data.CommandType.StoredProcedure;
                cmd.CommandText = "spGetCompartmentsList";
                cmd.Parameters.Add(new SqlParameter("@progid", module));
                cmd.Parameters.Add(new SqlParameter("@compId", compID));
                cmd.Parameters.Add(new SqlParameter("@compDesc", compDesc));
                cmd.Parameters.Add(new SqlParameter("@compType", compType));
                cmd.Parameters.Add(new SqlParameter("@equipMake", equipMake));
                cmd.Parameters.Add(new SqlParameter("@equipModel", equipModel));
                cmd.Parameters.Add(new SqlParameter("@compMake", compMake));
                cmd.Parameters.Add(new SqlParameter("@compSize", compSize));
                cnn.Open();
                SqlDataReader dr = cmd.ExecuteReader();
                dt.Load(dr);
                return dt;
            }
            catch
            {
                throw;
            }

        }

Answer 1

Как насчет изменения this._http.get() на this._http.post().

Вы также можете использовать интерфейс в своем угловом интерфейсе, который имеет те же свойства, что и ваша модель в веб-интерфейсе, так что вы можете просто использовать [FromBody]ModelName, что сэкономило мне много работы

Answer 2

Первая проблема заключается в том, что вы выполняете http GET, но ваш метод API настроен на использование HttpPost

this._http.get("api/Component/getComponents", options).pipe(catchError(this.handleError));

Вторая проблема заключается в том, что вы отправляете параметры в виде строки запроса.При выполнении POST рекомендуется отправлять данные в теле запроса.Поэтому попробуйте это следующим образом.

Создайте модель и отправьте ее из клиента

public getAllComponentList(compartid_auto :string, progid :string,ComponentId :string,ComponentDescription:string,ComponentType:string,ComponentMake :string,EquipModel:string): Observable<ComponentList[]> {
        let options = {
          params: new HttpParams().set('compartid_auto', compartid_auto).set('progid', progid)
          .set('ComponentId', ComponentId).set('ComponentDescription', ComponentDescription)
          .set('ComponentType', ComponentType).set('ComponentMake', ComponentMake)
          .set('EquipModel', EquipModel)
        };
        let obj = {
            'compartid_auto': compartid_auto,
            'progid': progid,
            'componentId': ComponentId,
            'componentDescription': ComponentDescription,
            'componentType': ComponentType,
            'componentMake': ComponentMake,
            'equipModel': EquipModel
        };
        return this._http.post("api/Component/getComponents", obj).pipe(catchError(this.handleError));
      }

Создайте внутреннюю модель, соответствующую модели клиентского запроса

public class RequestModel
{
    public int Compartid_auto { get; set; }
    public int Progid { get; set; }
    public string ComponentId { get; set; }
    public string ComponentDescription { get; set; }
    public string ComponentType { get; set; }
    public string ComponentMake { get; set; }
    public string EquipModel { get; set; }
}   

Затем используйте эту модель в своем API и прочитайте данные из модели запроса

[HttpPost]
[ResponseType(typeof(List<Component_Details>))]
public IHttpActionResult GetComponents([FromBody]RequestModel model)
{
    ...add your code
}