如何在angular2中執行http調用

Question

我正在嘗試獲取用於編輯目的的詳細信息，但我不確定如何使用可觀察對象進行操作是否可以幫助我解決編輯功能方面的問題。

    @Component({
        selector: 'Search',
         templateUrl:  './components/search/search.html',
       directives: [REACTIVE_FORM_DIRECTIVES],
        providers : [GetSocietyList],

   })

       export class Search {
         property:any = 'Add';
         data: string;
         form:any;
         prop: string = 'connenct';
         details: IStudent1[];
         details1: IStudent2[];

     constructor(fbld: FormBuilder,public http: Http,private _profileservice:GetSocietyList) {
    this.details = [];
    this.http = http;
    this._profileservice.getSocietyList()
        .subscribe(details => this.details = details);
        console.log(this.details);
    this.form = fbld.group({
        name: [''],
        age: ['', Validators.required],
        class: ['', Validators.required],
        grade: ['', Validators.required]

    });

  }

   edit(id): any {
    //console.log(id);
    this.property = 'update';
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded')
    this.http.get('http://localhost/a2server/index.php/profile/editprofiledb/' + id, { headers: headers })
        .subscribe(response => {
            if (response.json().error_code == 0) {
                this.details = <IStudent2[]>response.json().data;

            } else {
                this.details = <IStudent2[]>response.json().data;


        }

  }      )}

我正在嘗試獲取用於編輯目的的詳細信息，但我不確定如何使用可觀察對象進行操作是否可以幫助我解決編輯功能方面的問題。

Answer 1

this._profileservice.getSocietyList()
    .subscribe(details => this.details = details);
    console.log(this.details);

這將始終記錄undefined日志，因為您是在訂閱觀察對象后立即進行記錄。 您需要等待請求完成才能查看數據：

this._profileservice.getSocietyList()
    .subscribe(details => {
      this.details = details;
      console.log(this.details);
    });

因此，您最有可能獲取數據的方法是，您只是試圖太熱切地記錄下來。