Angular Observable 在调用时不设置局部变量 API

Question

我正在尝试像这样在局部变量中设置值：

export class memberComponent implements OnInit {

   member : Member = new Member();
   constructor(private memberService: MemberService) {}

   ngOnInit() {
     this.loadMember();
     console.log("member 1: ", this.member); // in here member is empty
   }

   loadMember(){
     this.memberService.getMember("john").subscribe(mem => {
       this.member = mem;
       console.log("member 2: ", this.member);// in here member is NOT empty
     });
   }
}

并且因为 member 是空的，页面中没有显示任何内容。这是我的 component.html

<h1>{{member.userName}}</h1>

最后，这是会员服务：

export class MemberService {

  baseUrl = environment.apiUrl;

  constructor(private http: HttpClient) {}

  getMember(userName: string) {
    return  this.http.get<Member>(this.baseUrl + 'users/' + userName);
  }

}

我尝试使用 pipe(take(1)) 方法和 interface 而不是 class 但没有区别。我的 html 页面上没有显示任何内容。

有什么问题，我该如何解决？

Answer 1

您应该在浏览器控制台中收到无法读取用户名的未定义错误。要解决此问题，请尝试使用如下所示的 elvis 运算符：-

<h1>{{member?.userName}}</h1>

Angular Observable 在调用时不设置局部变量 API

Angular Observable don't set local variable while calling API

typescript

angular-components

angular