Angular : 如何将 angular 反应式表单控件映射到 Web API 的实体属性

Question

我正在开发一个 angular 项目，我在其中使用 Web API 进行数据库操作。

因为我的实体属性的首字母大写，但是当我使用 angular 服务请求数据时，它只给我小写字母的数据。为了映射，我还使用小写字母作为我的表单控件以及在 table.

中显示数据

但是当我 post 数据到 API 因为我使用小写字母它没有映射实体，例如实体属性是 EmployeeId 但我是 post ing employeeId.

注意我在这里 post 以来自 angular 的 FormData 形式的数据和使用 HttpContext.Request.Form.Keys 的映射实体。

如何 post 形成控件以便它们可以映射到实体属性？

实体：

 public partial class TblEmployee
        {
            public int EmployeeId { get; set; }
            public string Name { get; set; }
            public string City { get; set; }
            public string Department { get; set; }
            public string Gender { get; set; }           
        }

分量：

//to show data in table
<tr *ngFor="let emp of this.empdata">
          <td>{{ emp.employeeId }}</td>
          <td>{{ emp.name }}</td>
          <td>{{ emp.gender }}</td>
          <td>{{ emp.department }}</td>
          <td>{{ emp.city }}</td>
    </tr> 

//creating form controls using reactive forms
this.employeeForm = this._fb.group({
          employeeId: 0,
          name: ['', [Validators.required,
          Validators.minLength(3)]],
          gender: ['', [Validators.required]],
          department: ['', [
            Validators.required       
          ]],            
          city: ['', [
            Validators.required
          ]]
});  

    <input class="form-control" type="text" formControlName="name">
     <select class="form-control" data-val="true" formControlName="gender">
              <option value="">-- Select Gender --</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
            </select>
 <input class="form-control" type="text" formControlName="department">
<select class="form-control" data-val="true" formControlName="city">
          <option value="">--Select City--</option>
          <option *ngFor="let city of cityList" value={{city.cityId}}>
            {{city.cityName}}
          </option>
        </select>

API 调用：

public int Create()
        {
            TblEmployee employee = new TblEmployee();

            Dictionary<String, Object> _formvalue = new Dictionary<String, Object>();
            var aaa = HttpContext.Request.Form;
            foreach (string key in HttpContext.Request.Form.Keys)
            {
                _formvalue.Add(key, HttpContext.Request.Form[key]);
            }    
            foreach (string key in HttpContext.Request.Form.Keys)
            {
                var propertyInfo = typeof(TblEmployee).GetProperty(key); // getting propertyInfo null here becoz posted values are in small letters.
            }
}

Answer 1

您必须在启动时应用以下配置 class 以更改驼峰式 （JSON 属性默认为驼峰式）

 services.AddMvc ()
        .AddJsonOptions(opt => opt.SerializerSettings.ContractResolver = new DefaultContractResolver ());

在您的 angular 项目中得到对地图的响应后，您应该应用

(<FormGroup>this.employeeForm).setValue(response, { onlySelf: true });

Angular : 如何将 angular 反应式表单控件映射到 Web API 的实体属性

Angular : How to map angular reative formcontrols with entity properties of Web API

entity-framework

angular

angular6