Как получить свойство ID из свойства Name. angular наблюдаемые rxjs - PullRequest
Новая
       6

Как получить свойство ID из свойства Name. angular наблюдаемые rxjs

0 голосов
/ 08 мая 2020

У меня есть список пользователей в поле выбора.

Он извлекает пользователей из базы данных и показывает их имена.

Этот компонент передает значение этого поля ( их имя) в виде строки для службы.

Но мне также нужен идентификатор этого человека.

Я использую: 

this.UserService.userName = this.userForm.get('name')?.value;

Как я могу узнать также получить идентификатор, привязанный к этому пользователю?

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Думаю, проблема в том, как вы привязываетесь к окну выбора. При привязке убедитесь, что вы используете id как значение, чтобы this.userForm.get('name')?.value возвращал ожидаемое значение.

Например,

, если вы хотите, чтобы id был как значение 

 <mat-select formControlName="name">
      <mat-option *ngFor="let user of users$ | async" value="{{user.id}}">{{user.name}}</mat-option>
              </mat-select>

Или, если вы хотите, чтобы имя и идентификатор имели значение (не рекомендуется) 

 <mat-select formControlName="name">
      <mat-option *ngFor="let user of users$ | async" value="{{user.id}}-{{user.name}}">{{user.name}}</mat-option>
              </mat-select>

И теперь, когда вы это делаете 

this.UserService.userName = this.userForm.get('name')?.value;

В зависимости от выбранного вами варианта вы получите желаемое значение.

Надеюсь, поможет.

0 голосов
/ 08 мая 2020

Ответ без данных может быть: 

let foundUser = users.find(user => user.name === this.UserService.userName);

В этом фиктивном примере: 

let users = [
    { id: 0, name: 'User 0', otherProp: '321' },
    { id: 1, name: 'O1', otherProp: '648' },
    { id: 2, name: 'Another User', otherProp: '850' },
    { id: 3, name: 'Almost There', otherProp: '046' },
    { id: 4, name: 'Last User', otherProp: '984' }
];

Рабочий пример: https://stackblitz.com/edit/angular-get-id-property-from-name-property?file=src%2Fapp%2Fapp.component.ts

...