Блог

Как мы устанавливаем значение по умолчанию в меню выбора в последней версии angular? У меня есть getAccountRoleDropdown то, что получает список ролей и заполняет его в меню выбора, у меня также есть getUserGeneralDetails то, что получает сведения о пользователях.

Я хочу проверить userRoleDto getUserGeneralDetails , имеет ли значение «от», затем показать его как значение по умолчанию (значение-идентификатор), roleName mat-select включить и отобразить в accountRoles качестве параметров, и если пользователь хотел выбрать элемент из списка, выберите параметры, установите значение в качестве идентификатора и покажите имя роли.

Есть идеи о том, как это возможно, ребята? мне все еще нужно selectChangeHandler ? Спасибо.

#html-код для выбора

    <mat-select (selectionChange)="selectChangeHandler($event)">
      <mat-option *ngFor="let role of accountRoles" >
         {{role.roleName}}
      </mat-option>
   </mat-select>
</mat-form-field>
 

#пользовательские данные из getUsergeneraldetails

 {
    "id": 1,
    "invitedByDate": "08/10/2021 02:06 am",
    "identityId": null,
    "title": "COO",
    "isSso": null,
    "ssocredentials": "",
    "userAccountDto": [
        {
            "id": 1,
            "accountId": 4,
            "userRoleDto": {
                "id": 6,
                "roleName": "Transaction Super User"
            },
    ],
    "accountId": 0,
    "roleId": 6,
    "isVerified": null,
    "securityRole": "Transaction Super User",
    "ssoEnabled": "No",
   
}
 

#получение пользовательских данных

 getUserGeneralDetails() {
    this.isInProgress = true;
    this._userProfileService
      .getUserGeneralDetails(this.userId, this.accountId)
      .pipe(finalize(() => (this.isInProgress = false)))
      .subscribe({
        next: (res) => {
          if (res.isSuccess) {
            this.data = res.data;
            console.log("user data" , this.data)
          }
        },
        error: (err) => this._notificationService.showError(err),
        complete: noop,
      });
  }
 

Объект #accountRoles из getAccountRoleDropdown

 [
    {
        "id": 1,
        "roleName": "Admin"
    },
    {
        "id": 2,
        "roleName": "Broker"
    },
    {
        "id": 5,
        "roleName": "Transaction Manager"
    },
    {
        "id": 6,
        "roleName": "Transaction Super User"
    },
    {
        "id": 7,
        "roleName": "Unlicensed User"
    }
]
 

#получить список ролей

 getAccountRoleDropdown() {
    this.AccountRoleIsInProgress = true;
     this._accountService.getAccountRoleDropdown(this.accountId, "")
      .pipe(
        finalize(() => this.AccountRoleIsInProgress = false),
      ).subscribe({
        next: (res) => {
          if (res.isSuccess) {
            this.accountRoles = res.data;
            console.log("this.accountRoles" ,this.accountRoles)
            // this.populateAccountRoleDropdown(res.data);
          }
        },
        error: err => this._notificationService.showError(err),
        complete: noop
      });
  }
 

Вы можете достичь этого с помощью ngModel, я изменил ваш код, (HTML amp; TYPESCRIPT) пожалуйста, посмотрите ниже:

компонент.ts

 generalUserDetails: any;
  accountRoles: Array<any> = [];
  defaultRole: any; // save your default in this variable

  constructor() {
    this.generalUserDetails = {
      "id": 1,
      "invitedByDate": "08/10/2021 02:06 am",
      "identityId": null,
      "title": "COO",
      "isSso": null,
      "ssocredentials": "",
      "userAccountDto": [
        {
          "id": 1,
          "accountId": 4,
          "userRoleDto": {
            "id": 6,
            "roleName": "Transaction Super User"
          }
        }
      ],
      "accountId": 0,
      "roleId": 6,
      "isVerified": null,
      "securityRole": "Transaction Super User",
      "ssoEnabled": "No",
    };
    this.accountRoles = [
      {
        "id": 1,
        "roleName": "Admin"
      },
      {
        "id": 2,
        "roleName": "Broker"
      },
      {
        "id": 5,
        "roleName": "Transaction Manager"
      },
      {
        "id": 6,
        "roleName": "Transaction Super User"
      },
      {
        "id": 7,
        "roleName": "Unlicensed User"
      }
    ];
  }

  ngOnInit() {
    this.getDefaultRole();
  }

  // this method will help you to get default role
  getDefaultRole() {
    if(this.generalUserDetails amp;amp; this.accountRoles.length) {
      let role = this.accountRoles.find(o=>o.id == this.generalUserDetails.userAccountDto[0].userRoleDto?.id);
      if(role) {
        this.defaultRole = role;
      }
    }
  }
 

component.html

 <mat-form-field>
  <mat-select [(ngModel)]="defaultRole" (selectionChange)="selectChangeHandler($event)">
    <mat-option *ngFor="let role of accountRoles" [value]="role">
      {{role.roleName}}
    </mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{defaultRole | json}}</p>
 

Скриншот с выводом

Примечание: Пожалуйста, не забудьте импортировать FormsModule в свое приложение.модуль

В настоящее время я жестко user Details Data закодировалamp; account roles , но вам нужно использовать уже определенный метод getUserGeneralDetails() amp; getAccountRoleDropdown() соответственно

Решение с реактивной формой

HTML-КОД

 <form [formGroup]="securityForm" class="securityForm">

  <label class="label1">Assign Security Role (*)</label>
  <mat-form-field>
    <mat-select [formControl]="roleId" (selectionChange)="selectChangeHandler($event)">
      <mat-option *ngFor="let role of accountRoles" [value]="role.id">
        {{role.roleName}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  
</form>
 

.КОД TS

 import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  AccountRoleIsInProgress: boolean = false;
  accountRoles: Array<any> = [];

  isInProgress: boolean = false;
  data: any;

  securityForm: FormGroup;
  isSso: FormControl;
  ssocredentials: FormControl;
  roleId: FormControl;

  constructor(
    private fb: FormBuilder
  ) {
    this.isSso = new FormControl();
    this.ssocredentials = new FormControl();
    this.roleId = new FormControl();

    this.securityForm = this.fb.group({
      isSso: this.isSso,
      ssocredentials: this.ssocredentials,
      roleId: this.roleId
    });
  }

  ngOnInit(): void {
    this.getUserGeneralDetails();
    this.getAccountRoleDropdown();
    this.getDefaultRole();
  }

  getAccountRoleDropdown() {
    // this.AccountRoleIsInProgress = true;
    // this._accountService
    //   .getAccountRoleDropdown(this.accountId, '')
    //   .pipe(finalize(() => (this.AccountRoleIsInProgress = false)))
    //   .subscribe({
    //     next: res => {
    //       if (res.isSuccess) {
    //         this.accountRoles = res.data;
    //         console.log('this.accountRoles', this.accountRoles);
    //         // this.populateAccountRoleDropdown(res.data);
    //       }
    //     },
    //     error: err => this._notificationService.showError(err),
    //     complete: noop
    //   });
    return [
      {
        "id": 1,
        "roleName": "Admin"
      },
      {
        "id": 2,
        "roleName": "Broker"
      },
      {
        "id": 5,
        "roleName": "Transaction Manager"
      },
      {
        "id": 6,
        "roleName": "Transaction Super User"
      },
      {
        "id": 7,
        "roleName": "Unlicensed User"
      }
    ];
  }

  getUserGeneralDetails() {
    // this.isInProgress = true;
    // this._userProfileService
    //   .getUserGeneralDetails(this.userId, this.accountId)
    //   .pipe(finalize(() => (this.isInProgress = false)))
    //   .subscribe({
    //     next: res => {
    //       if (res.isSuccess) {
    //         this.data = res.data;
    //         console.log('user data', this.data);
    //       }
    //     },
    //     error: err => this._notificationService.showError(err),
    //     complete: noop
    //   });

    return {
      "id": 1,
      "invitedByDate": "08/10/2021 02:06 am",
      "identityId": null,
      "title": "COO",
      "isSso": null,
      "ssocredentials": "",
      "userAccountDto": [
        {
          "id": 1,
          "accountId": 4,
          "userRoleDto": {
            "id": 6,
            "roleName": "Transaction Super User"
          }
        }
      ],
      "accountId": 0,
      "roleId": 6,
      "isVerified": null,
      "securityRole": "Transaction Super User",
      "ssoEnabled": "No",
    };
  }

  // this method will help you to get default role
  getDefaultRole() {
    if(this.data amp;amp; this.accountRoles.length) {
      let role = this.accountRoles.find(o=>o.id == this.data.userAccountDto[0].userRoleDto?.id);
      if(role) {
        this.roleId.setValue(role.id);
      }
    }
  }

  selectChangeHandler(event) {
    
  }
}

 

Примечание: Примечание: Пожалуйста, не забудьте импортировать ReactiveFormsModule в свой app.module.ts