使用 Angular 中的类字段未定义的状态

Question

问题是关于在 html 视图或控制台中显示类的字段。 我的配置：

export class UserDataService {

  constructor(
    private http:HttpClient
  ) { }

  executeHelloUserBeanService(){
    return this.http.get<User>("http://localhost:8081/physio-node/test/admin");
  }
}

从 Spring 传递过来的对象：

public class UserDTO {
    public String username;
    public String email;

    public UserDTO(User user) {
        this.username = user.getUserName();
        this.email = user.getUserE_mail();
    }
}

Angular 中的用户模型：

export class User {
 public username: string;
 public email: string;

 
    constructor(username: string, email: string){
      this.username = username;
      this.email = email;
    }
  }

export class ProfileComponent implements OnInit {
  user: User;
  name: string = "true";

  constructor(
    private service:UserDataService
  ) { }

  ngOnInit(): void {
    this.refreshProfile();
  }

   refreshProfile(){
    this.service.executeHelloUserBeanService().subscribe(
      response => {
        this.user = response;
        console.log(this.user);
        console.log(this.user.username);
      }
    )
  }

所以， console.log(this.user) 似乎是正确的，因为我可以在控制台中看到完整的对象

但是当我尝试在 html 视图中显示 {{user.username}} 时，它不起作用并且控制台：console.log(this.user.username) 显示：未定义；

@编辑

public class UserService {

    private UserTaskRepository userTaskRepository;

    public UserService(UserTaskRepository userTaskRepository) {
        this.userTaskRepository = userTaskRepository;
    }

    public UserDTO getUserbyID(String username){
        return userTaskRepository.findByUserName(username)
                .stream().
                        map(UserDTO::new).
                        collect(Collectors.toList()).get(0);
    }




}

Answer 1

来自服务器的响应似乎是一组用户，而不是您期望的单个用户。您可以在后端进行更正，也可以从响应数据中提取第一个元素：

executeHelloUserBeanService(){
    return this.http.get<User[]>("http://localhost:8081/physio-node/test/admin").pipe(
      // make sure the array is there and it has at least 1 element
      filter(res => res && res.length > 0),
      // extract the first element
      map(res => res[0])
    );
  }

Answer 2

在附加的屏幕截图中，很明显响应不是单一的object，而是User Object 的array。因此，要么您必须更改后端的实现，例如 return single object 而不是 array，要么像这样更改此 refreshProfile() 方法的实现

refreshProfile(){
    this.service.executeHelloUserBeanService().subscribe(
      response => {
        this.user = response[0]; // just read first element from response
        console.log(this.user);
        console.log(this.user.username);
      }
    )
  }