如何在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);
    });

因此，您最有可能获取数据的方法是，您只是试图太热切地记录下来。