Angular 7, веб-API Asp.net, назначение ролей пользователям - PullRequest
Новая
       36

Angular 7, веб-API Asp.net, назначение ролей пользователям

0 голосов
/ 05 марта 2019

У меня есть ASP.NET Web API с клиентским дизайном материала Angular 7.Я хочу назначить роль текущему пользователю, у меня есть пользователь, которому я пытаюсь назначить роль.У меня работает .Net-часть, но я не могу понять, как это реализовать на угловой стороне.Я не уверен, правильно ли реализован выпадающий список.В моем console.log () роль выглядит как «неопределенная».Любая помощь приветствуется.

Ниже приведен текущий код.

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();
    }

Угловой 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>

Ответы [ 3 ]

0 голосов
/ 05 марта 2019

Вы ошиблись 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 представляет собой список выбранных ролей, если это правильно, вам нужно отправить массив ролей, а не только одну роль.

0 голосов
/ 05 марта 2019

Я просто очень быстро смоделировал это, и это работает.Возможно, вам придется изменить некоторые имена переменных.

  • Перемещено [(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

0 голосов
/ 05 марта 2019

Несколько вещей, которые я заметил: Имя вашей модели в контроллере - роль, и это строка в соответствии с параметрами, полученными в методе сервиса, поэтому вы должны использовать [(ngModel)] = "role", а также IЯ думаю, вы должны поместить его в тег 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", это будет менее запутанным для вас. Вы можете проверить пример здесь

...