【问题标题】:angular 2 rc4 creating variable after getting data from Http observable从 Http observable 获取数据后,angular 2 rc4 创建变量
【发布时间】:2016-07-28 22:33:55
【问题描述】:

我在 angular2 中有点新,我希望你能帮助我,我很确定它一定很简单,但这是我制作一个可以处理 http 调用的服务的交易,但它需要在数据加载后应用一些过滤器而不再次向 api 服务器询问新参数基本上我想让 angular2 处理那部分

更新**

服务

httpHandler(type,model){var token = this.LoginService.JwtDecoded(); var authHeader = new Headers(); authHeader.append('Authorization', 'Bearer ' + token);

 return this.http.get('http://127.0.0.1/api/service/'+model, {
      headers: authHeader
      })
  .map((res: Response) => res.json());    }

组件

this.Request.httpHandler('get','receiver/')
.subscribe(
    data => this.data = data, <-- from here
    err => this.error = 'there is a mistake!',
    () => console.log(this.data) <-- this one is outputing just what i want
  );
console.log(data); <-- i wanna output the same result in here

那么,如何将 api 结果捕获到变量中?

更新** 我想在订阅外输出'this.data',奇怪的是我可以在订阅内和html中输出,但我需要在输出到html之前用那个json做一些事情..有什么想法吗?谢谢!

感谢你们的时间,非常感谢。

【问题讨论】:

  • 为了有一个最小、完整和可验证的示例,您应该真正详细说明您当前的问题是什么。它现在做了什么,为什么会出错?

标签: angular angular2-http


【解决方案1】:

创建一个服务来获取数据

// xyz.service.ts

import {Injectable} from '@angular/core';

import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class DataService {
  private url = `receiver/`;

  constructor(private http: Http) {
  }

  getData(): Observable<any> {
    return this.http.get(this.url)
      .map((res: Response) => res.json());
  }
}

现在在组件中使用该服务。

//xyz.component.ts

import {Component, OnInit} from '@angular/core';

import {DataService} from './xyz.service';

import {HTTP_PROVIDERS} from '@angular/http';

@Component({
  selector: 'app-home-content',
  templateUrl: 'xyz.component.html',
  styleUrls: ['xyz.component.scss'],
  providers: [DataService, HTTP_PROVIDERS]
})
export class HomeContentComponent implements OnInit {
  private data: Object;

  constructor(private _dataService: DataService) {
  }

  ngOnInit() {
    this._dataService.getData().subscribe(data => {
      this.data = data;
    });
  }
}

现在数据将在this.data中提供

【讨论】:

  • 感谢 ritz 我试着按照你说的去做,但我无法让它工作,奇怪的是我可以在订阅内输出或在 html 中输出数据?.name 但我不能在订阅外输出完全相同的功能..你有什么想法吗??
  • 那是因为它是一个异步函数。如果你想对数据做任何事情,你必须在订阅里面做。它可以在 HTML 中访问,因为 Angular 在检测到 this.data 已更改时会自动更新视图。我希望你从 subscribe 内部调用一个函数,并在其中使用 this.data 做任何你想做的事情,因为这样它就可以使用了。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-05-26
  • 1970-01-01
  • 2019-10-15
  • 1970-01-01
  • 2016-02-13
  • 2016-05-15
相关资源
最近更新 更多