Question

我有什么：具有方法GetUser（id：number）的HttpService

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

模型中的用户（实体框架）看起来像这样：

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

我从Pipe在转换函数中调用GetUser（id）

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响应中看到了

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

我看到未定义的内容是什么？我也有Angular的User Class，但是我不知道如何映射它。

新信息。如果我运行这样的代码：

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

Entity Framework类将其拼写为ADName。您的打字稿代码将其拼写为AdName。

如果将变量的打字稿拼写更改为ADName，则应该对其进行排序。

编辑：对不起，重新读取该错误。在异步http函数返回结果之前，将调用您的transform函数。这意味着您要访问的变量将是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;
       }
  }

请参阅此代码以获取信息。

希望这会有所帮助！

Answer 2

之所以出现此问题，是因为您尝试在异步调用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>

尽管我在响应中看到了它们，但无法通过ID从数据库中获取用户并显示其字段

2 个答案: