rest - 休息网络服务响应到来后如何呈现angular2 html页面

Question

我可以毫无问题地获得休息网络服务响应并在屏幕上对其进行控制。但不幸的是，在页面中我可以看到 werbservice 调用结果的初始值。在收到 wbservice 的响应后，我需要做什么来呈现页面？我的意思是我可以看到 userInfo 和 userName 的初始值。您可以看到下面的代码片段。

问候阿尔珀

  export class NavigationComponent implements OnInit {
response:any;
errorMessage:any;
form:FormGroup;
obj = {"one": "", "two": "", "three": "", "four": ""};
webserviceUrl = "https://httpbin.org/post";
webServiceUrlGet = "https://jsonplaceholder.typicode.com/posts/1";
username = "alper"
userInfo = "alper Info";
componentName =  'AppComponent';

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

 getUserName() {

this.http.get(this.webServiceUrlGet)
  .subscribe(
    function (data) {
      this.userInfo = data.json();
      this.username = this.userInfo.userId;


    },
    error => this.errorMessage = <any>error);
return this.username;
}

Answer 1

这行不通

.subscribe(
  function (data)

应该是

.subscribe(
  (data) =>

为了 this 在回调中工作。

要仅在响应到达时呈现模板，您可以使用例如

<ng-container *ngIf="userInfo">
  <!-- actual template content here -->
</ng-container>