不从 Angular 5 触发 Web API

Question

我已附上我的 Component.ts、service.TS 和网络 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));
      }

这是我的网站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

第一个问题是您正在执行 http GET，但您的 api 方法配置为使用 HttpPost

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

第二个问题是您将参数作为查询字符串发送。在做POST时，推荐的方式是在请求体中发送数据。所以，就这样试试吧。

创建模型并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
}

Answer 2

如何将 this._http.get() 更改为 this._http.post()。

您也可以在您的 angular 中使用一个界面，该界面与您在网络中的模型具有相同的属性 api 这样您就可以只使用 [FromBody]ModelName 这节省了我很多工作

不从 Angular 5 触发 Web API

Does not trigger the Web API from Angular 5

c#

asp.net-mvc

asp.net-web-api

angular5