在Angular8中将HTTP响应json转换为typescript对象

Question

我用这个服务结果构造了一个组件类对象，我也得到了错误

错误TypeError：无法读取未定义的属性“name”

当我在HTML文件中使用它时。

{
  name: "somename",
  status: "sometext",
  bio: "sometext",
  email: "email",
  gitlab: "link",
  twitter: "link",
  instagram: "link",
  linkedin: "link",
  telegram: "link"

},

<p class="ui header">{{profile.name}}</p>

Answer 1

问题出在AppService的getProfile()方法中。您正在从该方法返回this.profile，相反，您应该返回如下所示的可观察的：

getProfile(): Observable<Profile> {
    return this.http.get(this.profileApiUrl) 
               .pipe(
                  map(pro => new Profile(pro))
               );
  }

现在，在component中，将此服务注入到组件构造函数中，如下所示：

//have a class variable
//this will be used in the template to render the profile
profile: Profile;
constructor(private _appService: AppService) {}

ngOnInit() {
 this._appService.getProfile().subscribe(pro => {this.profile = pro;});
}

在模板中使用安全运算符-

<p class="ui header">{{profile?.name}}</p>