Невозможно получить пользователя по идентификатору из базы данных и отобразить его поля, хотя я вижу их в ответ

Question

Что у меня есть: HttpService с методом GetUser (id: номер)

constructor(private http: HttpClient) { }

AddUser(us: User) {
  return this.http.post<any>(this.url + this.userString, us);
}

GetUsers() {
  return this.http.get(this.url + this.userString);
}

GetUser(id: number) {
  return this.http.get(this.url + this.userString + '/' + id.toString());
}

Пользователь в модели (Entity Framework) выглядит так:

public class User
    {
        public int UserId {get; set; }
        public string ADName {get; set; }
        public string Email {get; set;}
    }

Я вызываю GetUser (id) из Pipe, где в функции преобразования:

import { Pipe, PipeTransform } from '@angular/core';
import { SendRecvService } from './SendRecv.service';

@Pipe({
  name: 'idToValue'
})
export class IdToValuePipe implements PipeTransform {

 valuesUsers: any;

 constructor(private srv: SendRecvService) {
 }

 getUserName(id: number) {
   this.srv.GetUser(id).subscribe(response => {
   this.valuesUsers = response;
  }, error => {
    console.log(error);
  });
}

  transform(Argument1: number): any {
       // change UserId to UserName
       console.log(Argument1);

       this.getUserName(Argument1);
       return this.valuesUsers.adName;
  }

}

Я получил ошибку: ОШИБКА TypeError: Невозможно прочитать свойство 'adName' из неопределенного

Хотя я вижу в Http Response:

{userId: 1, adName: "mama", email: "mama@father.com"}

Что я вижу, что оно не определено? У меня также есть класс пользователя на Angular, но я не знаю, как мне его отобразить.

Новая информация. Если я запускаю такой код:

import { Pipe, PipeTransform } from '@angular/core';
import { SendRecvService } from './SendRecv.service';

@Pipe({
  name: 'idToValue'
})
export class IdToValuePipe implements PipeTransform {

  valuesUsers: any;

 constructor(private srv: SendRecvService) {
 }

getUserName3(id: number) {
  this.srv.GetUser(id).subscribe((response) => {
    this.valuesUsers = response;
    console.log(this.valuesUsers);
  });
}

transform(Argument1: number): any {
  this.getUserName3(Argument1);

  return 'hello';
}

}

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

Но, как я понимаю, мне нужно сделать его асинхронным. К сожалению, отправленные вами коды не работают.

Можем ли мы шаг за шагом вносить изменения и видеть, в чем проблема?

Answer 1

Проблема возникает из-за того, что вы пытаетесь получить доступ к valuesUsers до того, как ваш асинхронный вызов this.srv.GetUser(id) вернулся с ответом, и строка this.valuesUsers = response; была выполнена.Чтобы заставить idToValue трубу работать должным образом, давайте изменим код следующим образом [Обратите внимание, я удалил НЕ нужный код]:

import { Pipe, PipeTransform } from '@angular/core';
import { SendRecvService } from './SendRecv.service';

@Pipe({
  name: 'idToValue'
})
export class IdToValuePipe implements PipeTransform {     

 constructor(private srv: SendRecvService) {
 }         

  transform(Argument1: number): any {
       // change UserId to UserName
       console.log(Argument1);

       // let's return an observable from the transform method
       // this observable value will be unwrapped using async pipe
       // in the template where you will use this pipe
       // like this - {{id | idToValue | async}} 

       return this.srv.GetUser(id)
                  .pipe(
                        // lets map the response of GetUser to adName
                        // which you want ultimately return from the transform
                         map(user => user.adName)
                       );
  }

}

В шаблоне вы должны использовать async труба после idToValueтруба такая:

 <div>
  {{userId | idToValue | async}}
 </div>

Answer 2

Класс Entity Framework записывает его ADName. В вашем машинописном коде написано: AdName.

Если вы измените свое правописание для машинописного текста переменной на ADName, это должно привести к ее сортировке.

Редактировать: Извините, перечитайте ошибку. Ваша функция преобразования будет вызвана до того, как асинхронная http-функция вернет результат. Это означает, что переменная, к которой вы пытаетесь получить доступ, будет undefined, пока ваш вызов не вернется.

 getUserName(id: number) {
   return this.srv.GetUser(id).pipe(map(response => {
   this.valuesUsers = response;
  }), catchError((error) => console.log(error));
}

  transform(Argument1: number): any {
       // change UserId to UserName
       console.log(Argument1);

       this.getUserName(Argument1).subscribe((response) => {
          return response.ADName;
       }
  }

См. Этот код для информации.

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