Angular 7，Asp.net web api，为用户分配角色

Question

我有一个带有Angular 7材料设计客户端的ASP.NET Web API。我想为当前用户分配一个角色，我有一个我正在尝试为其分配角色的用户。我有.Net部分工作，但我无法弄清楚如何在角度方面实现它。我不确定我是否正确实现了选择下拉列表。在我的console.log（）中，角色即将出现'undefined'。任何帮助表示赞赏。

以下是当前的代码。

ASP.NET Web API

     [HttpPost]
    public async Task<IActionResult> Role(Roles role)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        try
        {
            var assignRole = await _contextFile.AddRoles(role.Email, role.UserRoles);
        }
        catch (Exception ex)
        {
            throw ex;
        }
        return Ok();
    }

Angular 7

服务

userRole(email: string, role: string){
  return this.http.post(this.Url +  {email, role});
}

populateDropdownRoles(){
  return this.http.get(this.roleUrl);
}

.ts文件

assignRole() {
 this.roleService.userRole(this.user.email, this.role);
}
dropdownRole() {
this.roleService.populateDropdownRoles();
}

.html文件

<form (ngSubmit)="assignRole()">
  <mat-form-field>
    <input
      matInput
      placeholder="Email"
      name="email"
      value="{{ user.email}}"  
    />
  </mat-form-field>
    <mat-form-field>
    <mat-select placeholder="Role">
      <mat-option *ngFor="let role of roles" name ="rolename" [(ngModel)]="role.rolename" value="{{role.rolename}}">
        {{role.rolename}}
      </mat-option>
    </mat-select>
  </mat-form-field>
    <button
      mat-raised-button
      type="submit"
    >
      Assign
    </button>
</form>

Answer 1

我只是很快地嘲笑这个，这是有效的。您可能必须修改一些变量名称。

• 将[(ngModel)]和name移动到<mat-select>元素。
• 声明了在组件类中绑定到[(ngModel)]的变量。
• 在assignRole()方法中打印出选定的值。

注意：这是假设您已成功从API返回角色值。我在组件类中添加了一个模拟角色数组。

---

component.ts

@Component({
  selector: 'app-roles-form',
  templateUrl: './roles-form.component.html',
  styleUrls: ['./roles-form.component.css']
})
export class RolesFormComponent implements OnInit {

  public roles = [{ rolename: 'user' }, { rolename: 'admin' }];
  public selectedRole: any;

  constructor() { }

  ngOnInit() {
  }

  assignRole() {
    console.log('selectedRole: ', this.selectedRole);
  }

}

component.html

<form (ngSubmit)="assignRole()">
  <mat-form-field>
    <mat-select placeholder="Role" [(ngModel)]="selectedRole" name="selectedRole">
      <mat-option *ngFor="let role of roles" value="{{role.rolename}}">
        {{role.rolename}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <button mat-raised-button type="submit">
    Assign
  </button>
</form>

---

DOCS

https://stackblitz.com/angular/gokjjqynqvo?file=main.ts

https://material.angular.io/components/select/overview

Answer 2

我注意到的一些事情：控制器中模型的名称是角色，它是根据服务方法中收到的参数的字符串，所以你应该使用[（ngModel）] =“role”，我认为你应该把它放在mat-select标签而不是mat-option。所以你的HTML看起来应该是这样的。

<mat-form-field>
 <mat-select [(ngModel)]="role"  name ="role"  placeholder="Role">
  <mat-option *ngFor="let role of roles" value="{{role.rolename}}">
    {{role.rolename}}
  </mat-option>
 </mat-select>
</mat-form-field>

PS：我建议你将模型的名称更改为roleName。比如this.roleName和[（ngModel）] =“roleName”name =“roleName”它会让你感到困惑。 You could check the example here

Answer 3

你有ngModel错误，ngModel继续控制，而不是选项。

<mat-select [(ngModel)]="role" name ="rolename" placeholder="Role">
  <mat-option *ngFor="let role of roles" [value]="role.rolename">
    {{role.rolename}}
  </mat-option>
</mat-select>

之后你需要检查.Net部分Role类的结构，因为，如果我的内存没有失败，UserRoles属性是一个选定角色的列表，如果这是正确的，你需要发送一组角色，而不仅仅是一个角色。