Question

帐户页面应将数据返回给登录用户。我有以下代码：

http.get.service.ts

getUserData() {
      const token = this.currentUser.token;

      const body = JSON.stringify({token: token});
      return this.http.post('https://test.com/src/getuserdata', body)
        .map((response: Response) => {
          const data = response.json();
          const returnArray = [];
          for (let key in data) {
            returnArray.push(data[key]);
          }
          return returnArray;
        });
    }

被调用的JSON文件的输出是：

{
"email":"test@test.com","lastname":"Grimes"
}

account.component.ts

export class AccountComponent implements OnInit {

  userData: any = [];

  constructor(private httpService: HttpService) { }

  ngOnInit() {
    this.httpService.getUserData()
      .subscribe(
        data => {
          this.userData = data;
        }
      );
  }

}

ngOnInit的回复是“test@test.com，Grimes”

account.component.html

...
<div class="n-r-m-e" [innerText]="userData.email">
<div class="n-r-m-e-v" [innerText]="userData.lastname">
...

div-tags返回“undefinded”。我该如何解决这个问题？

Answer 1

响应是异步的，因此在检索数据之前呈现视图。

你可以通过几种方式解决这个问题。使用Safe Navigation Operator，这将保护空值：

<div class="n-r-m-e" [innerText]="userData?.email"></div>
<div class="n-r-m-e-v" [innerText]="userData?.lastname"></div>

或者你可以将你的div包裹在*ngIf里面，除非userData

中有值，否则不会呈现模板的那一部分

<div *ngIf="userData">
  <div class="n-r-m-e" [innerText]="userData.email"></div>
  <div class="n-r-m-e-v" [innerText]="userData.lastname"></div>
</div>

此外，您可以初始化userData对象，以便它不会被定义。

Answer 2

userData未定义的原因是因为数据的提取是异步的，并且在最初呈现模板时将无法使用。

要从异步操作将数据传递到模板，您需要使用observable和异步管道。

组件： userData: Observable<any>;

模板： <account-component [userData]='userData | async'></account-component>

为您传递到模板中的数据建立模型也是一个好主意，这样您就不需要使用Observable<any>，而是可以使用类似{{1}的内容}

Angular 2：如何获取数据并返回单个值？

2 个答案: