我如何將json響應映射到數組angular2

Question

我的響應被映射為未定義，我以控制台方式完美地記錄了響應，但是每當我以控制台方式記錄陣列/ json對象時，它們就會被設置為未定義。 這是我的代碼：

  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();
    })
  }

然后在主要的我控制台日志角色中，它變得不確定

這是構造函數

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

角色包含與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())
  }

注意 ：promises不是Angular（2+）方法：) 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服務始終返回僅觸發1次的Observable。

還要檢查HttpClient服務。 這是用於Http調用的新Angular API。 至少您不需要每次都在響應時調用json()方法=）。 更多閱讀： https : //angular.io/guide/http

實際上，Angular文檔是完美的。 那里描述了很多有用的東西。

查閱官方文檔以獲取更多示例和信息： https ://angular.io/tutorial/toh-pt6#observables

Answer 2

這是一個異步方法，並且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
     }
  }