Question

我的响应被映射到undefined，我控制台完美地记录了响应，但每当我控制台记录数组/ json对象时，它们都会被设置为undefined。这是我的代码：

  public roles: any;


   private getGroups() {
     console.log("In Groups");
    let _url = "GroupsURL";
    let headers = new Headers();
    headers.append('X-User', sessionStorage.getItem('username'));
    headers.append('X-Token', sessionStorage.getItem('token'));
    headers.append('X-AccessTime', sessionStorage.getItem('AccessTime'));
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({ headers: headers });

    return this.http.get(_url, options)
    .toPromise().then(response => {
      this.roles = response.json();
    })
  }

然后在主I控制台日志角色中，它变得未定义

这是构造函数

 constructor() {
this.getGroups();
console.log(this.roles); <-- returns undefined

roles包含与包含相同数据成员的json响应相同的模型，例如：

    export class Group {
    id: string;
    name: string;
    pwd_expiry_in_days: string;
}

当我在回程中控制记录响应时，它会完美地记录响应，为什么它超出了我的主要范围？

如果需要，我可以提供更多详细信息。我的主要目标是从我的服务器数据中获取并将其映射到我的前端表单，以提供要分配的角色列表。

谢谢你！

Answer 1

代码是异步的。但你使用代码就像是同步一样。那样不行。既然你需要这个：

  constructor() {
      this.getGroups()
        .then(roles => this.roles = roles); // <-- here you set internal roles property
      // ....
   }


   private getGroups() {
     console.log("In Groups");
    let _url = "GroupsURL";
    let headers = new Headers();
    headers.append('X-User', sessionStorage.getItem('username'));
    headers.append('X-Token', sessionStorage.getItem('token'));
    headers.append('X-AccessTime', sessionStorage.getItem('AccessTime'));
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({ headers: headers });

    return this.http.get(_url, options)
    .toPromise()
    .then(response => response.json())
  }

注意：承诺不是Angular（2+）方式:) Observable现在可以完成这项工作。

observables示例：

constructor() {
  this.getGroups()
    .subscribe(roles => this.roles = roles);
  }
}

private getGroups(): Observable<any> {
  // ....
  return this.http.get(_url, options)
    .map(response => response.json())
}

不要担心你通过订阅超过1次fn的解雇。 Http服务总是返回一个只能触发一次的observable。

同时检查HttpClient服务。它是用于Http调用的新Angular API。至少你不需要每次响应都调用json()方法=）。更多阅读：https://angular.io/guide/http

实际上，Angular文档是完美的。那里有很多有用的东西。

了解更多示例和信息的正式文档：https://angular.io/tutorial/toh-pt6#observables

Answer 2

异步方法和promise值也会在不同的时间返回。当您因返回promise值而调用getGroups（）方法时。你需要在then（）中获取值，或者必须再次使用then（）来生成如下的顺序过程;

private getGroups() {
     console.log("In Groups");
    let _url = "GroupsURL";
    let headers = new Headers();
    headers.append('X-User', sessionStorage.getItem('username'));
    headers.append('X-Token', sessionStorage.getItem('token'));
    headers.append('X-AccessTime', sessionStorage.getItem('AccessTime'));
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({ headers: headers });

    return this.http.get(_url, options)
    .toPromise().then(response => {
      this.roles = response.json();
      console.log(this.roles);    // It will work

    })
    .then( data => {
     console.log(data);    // it also works
     }
  }

如何将json响应映射到数组angular2

2 个答案: