Angular：如何将Angular Creative formcontrols映射到Web API的实体属性

我在一个angular项目中工作，我正在使用WebAPI进行db操作

因为我的实体属性有首字母大写，但当我使用angular service请求数据时，它只给我小写字母的数据。为了映射这一点，我还在表单控件中使用小写字母，并在表中显示数据

但当我使用小写字母将数据发布到API时，它不会映射实体，例如，实体属性是EmployeeId，但我发布的是EmployeeId

注意这里我使用HttpContext.Request.form.Keys以FormData的形式发布来自angular和mapping实体的数据

如何发布表单控件，以便可以使用实体属性映射它们

实体：

 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>

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.
            }
}

//在表中显示数据
{{emp.employeeId}
{{emp.name}
{{emp.gender}
{{emp.department}}
{{emp.city}
//使用反应式窗体创建窗体控件
this.employeeForm=this.\u fb.group({
员工ID:0，
名称：[''，[Validators.required，
验证程序。最小长度（3）]，
性别：[''[Validators.required]]，
部门：[''[
需要验证器
]],            
城市：[''[
需要验证器
]]
});  
--选择性别--
男性
女性
--选择城市--
{{city.cityName}

API调用：

//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>

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.
            }
}

public int Create（）
{
TblEmployee employee=新TblEmployee（）；
字典_formvalue=新字典（）；
var aaa=HttpContext.Request.Form；
foreach（HttpContext.Request.Form.Keys中的字符串键）
{
_Add（key，HttpContext.Request.Form[key]）；
}    
foreach（HttpContext.Request.Form.Keys中的字符串键）
{
var propertyInfo=typeof（TblEmployee）.GetProperty（key）；//此处获取propertyInfo null，因为发布的值是小写字母。
}
}

您必须在启动类中应用以下配置来更改camelCase（默认情况下，JSON属性是camelCase）

在您的角度项目中，在得到映射的响应后，您应该应用

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

（this.employeeForm）.setValue（响应，{onlySelf:true}）；