问答

订阅Angular 2

 来源    2019-05-03    0  

我想要我的ngOnInit函数做下一件事:
  – 使用this.structureRequest.sendRequest()对某些数据进行http请求,这样可以正常工作,并且在收到数据后开始使用this.viewNodes()函数查看它.
我使用订阅,但它不起作用,我认为我做订阅功能有问题.请帮忙:)

> HomeComponent.ts

import {Component} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {StructureRequestService} from './StructureRequestService';

export class Content {

ok: boolean;
content = [];
}
@Component({
providers: [StructureRequestService],
styleUrls: ['app/home/home.css'],
templateUrl:'./app/home/homePageTemplate.html'

})

export class HomeComponent {
contentArray = [];
myRes: Content;
showAssigned:boolean = false;
showSubitems:boolean = false;
showUsers:boolean = false;

constructor(private structureRequest: StructureRequestService) {}

ngOnInit() {
this.structureRequest.sendRequest().subscribe( this.viewNodes());

}

viewNodes() {
this.myRes = this.structureRequest.result;
this.contentArray = this.myRes.content;
this.showAssigned = true;
 }
 }

2.这是http服务,http get工作正常,收到的所有数据:

import {Injectable} from '@angular/core';
import {Http, Response, Headers, RequestOptions} from '@angular/http';

import {Observable} from 'rxjs/Observable';

@Injectable ()
export class StructureRequestService {
result: Object;
//private myUrl = 'http://manny.herokuapp.com/audit/get/structure';
private myUrl = './app/home/nodes.json';  // local URL to structure APi
constructor (private http: Http) {
    //use XHR object
    let _build = (<any> http)._backend._browserXHR.build;
    (<any> http)._backend._browserXHR.build = () => {
        let _xhr =  _build();
        _xhr.withCredentials = true;
        return _xhr;
    };
}

sendRequest() {
    let body = JSON.stringify({});
    let headers = new Headers({ 'Content-Type': 'application/json'});
    let options = new RequestOptions({
        headers: headers
    });
     this.http.get(this.myUrl, options)
        .map((res: Response) => res.json())
        .subscribe(res => {this.result = res;
            return this.result; });
}
}

3.问题是制定同步步骤:接收数据,而不是查看数据.

您可能希望在请求返回值而不执行this.viewNodes()的结果时执行this.viewNodes

这个

this.structureRequest.sendRequest().subscribe( this.viewNodes());

应改为

this.structureRequest.sendRequest().subscribe(() => this.viewNodes());

前者执行this.viewNodes()并将结果传递给subscribe(),后者创建一个新的内联函数,该函数传递给subscribe().调用此内联函数时,执行this.viewNodes()

如果你想传递值sendRequest()返回它应该是

this.structureRequest.sendRequest().subscribe((result) => this.viewNodes(result));

更新

sendReqeust()不返回任何内容.

它应该是

return this.http.get(this.myUrl, options) ...

但是这只能在你的代码中使用它的方式,如果它返回一个Observable.

但最后的subscribe()返回一个订阅

 return this.http.get(this.myUrl, options)
    .map((res: Response) => res.json())
    .subscribe(res => {this.result = res;
        return this.result; });

因此应该改为

 return this.http.get(this.myUrl, options)
    .map((res: Response) => res.json())
    .map(res => {
      this.result = res;
      return this.result;
    });

要么

 return this.http.get(this.myUrl, options)
    .map((res: Response) => res.json())
    .do(res => {
      this.result = res;
    });

不同之处在于do()不会修改流的值,也不需要返回任何内容.从.map()返回的值将被转发.如果要使用,请确保导入do(如map).

相关文章
订阅Angular 2中的route params和queryParams
问答我已经设置了以下路由系统 export const MyRoutes: Routes = [ {path: '', redirectTo: 'new', pathMatch: 'full'}, {pa ...
2
订阅Angular 2中的多个Observable
问答我的Angular 2应用程序在服务中有2个方法[GetCategories()和GetCartItems()],这两个方法都返回 观测. 为了从我的组件一个接一个地调用这两个方法,我写了下面的代码 ...
1
订阅Angular中父组件的更改
问答我有一个父组件,它包含一个子组件列表.这些孩子是动态创建的,可以是任何类型. 所以,我正在做的是在父组件中使用ng-container作为主机,使用ComponentFactoryResolver创建 ...
1
是否有必要取消订阅Angular组件中的Redux存储
问答我几乎可以肯定我应该,但我没有找到有关Redux文档的任何具体信息.我的大多数Angular组件中的模式是我订阅/取消订阅Redux商店,如: import { Component, OnInit } ...
typescript – 订阅Angular 2中组件属性的更改以进行去抖动自动保存?
问答假设我有以下Angular 2组件,其中foo是一个未绑定到表单的对象,而不是来自Input(): @Component({ selector: 'foo', templateUrl: '/angul ...
1
angular2 – 您需要取消订阅Angular 2的http调用以防止内存泄漏?
问答您是否需要取消订阅Angular 2的http呼叫来防止内存泄漏? fetchFilm(index) { var sub = this._http.get(`http://example.com`) ...
1
订阅Angular 2 HTML元素中的observable
问答我有一个可观察的生成具有isLoading属性的用户,这样就产生了预期的结果: {{ (user$| async).isLoading }} 我希望能够在HTML属性中使用此isLoading属性,如 ...
订阅Angular 2中主/详细示例中的子路径更改
问答我在主/详细视图中遇到路由问题.如果我去路线/主人,InfoComponent应该显示一些一般信息.如果我转到/ master / 1,DetailsComponent应显示id为1的项目的一些数据. ...
取消订阅订阅Angular的最简单方法
问答嗨,我对Angular很新.我有大约4个数据库查询,每个查询都是订阅(rxjs / Rx).所以我知道我需要取消订阅每个订阅以节省内存泄漏.我该如何优化通话?我的意思是,我不想打电话给每个订阅并逐个取 ...
1
angular – 如何在继续之前等待for循环内的订阅完成
问答我在for循环中有一个订阅,它从外部源获取JSON数据作为一系列"类别数据",然后根据用户当前位置过滤该数据.我需要的是等待所有订阅完成,然后才能继续我的应用程序.现在,它不等待所 ...
1
angular – RxJS Observable:订阅丢失了吗?
问答以下两个可观察映射之间有什么区别? (如果以下代码中的某些内容对您来说很奇怪:它源于一个边做边学的爱好项目;我仍然学习RxJS) 我有一个带有getter和构造函数的组件.两者都从应用程序的ngrx存 ...
1
Angular 2可观察订阅不会触发
问答我有一个订阅可观察不触发的问题. 我有一个使用侧面导航布局指令的布局,如下所示: <md-sidenav-layout class="nav-bar"> <md- ...
1
Angular 2 – 链接可观察订阅
问答我正在构建我的第一个Angular 2应用程序,并且在链接可观察订阅时遇到问题. 以下代码适用于Chrome,但不适用于Firefox和IE. 下面这样做的正确方法是什么?我需要获取用户的当前位置,然 ...
javascript – Angular 2可观察订阅箭头功能越来越大
问答我想知道是否有一种更好的方法来定义角度2可观察订阅的回调函数,当处理http调用而不违反Single responsibility principle时,嵌入式逻辑会导致丑陋的脏代码. 我试图使用函数 ...
1
angular – 我们是否需要取消订阅完成/错误输出的可观察值?
问答当我知道在我的组件/类超出范围之前,observable肯定会完成(无论是完整的还是错误通知),我是否还需要取消订阅才能防止内存泄漏?换句话说,完成/错误编辑是否可以自动清理,所以我不必担心?::Ob ...
1
javascript – 是否可以使用rxjs angular 5在其他标签浏览器中订阅observable
问答我有一个角度应用程序,有两个页面,我在浏览器的每个选项卡中打开它们,如果我在第1页中执行某些方法,我希望第2页订阅数据更改为rxjs并更新第2页中的数据,如实时应用程序,是有什么办法可以在没有webs ...
1
Angular 2 – 订阅Observable.fromEvent错误:“无效的事件目标”
问答尝试订阅Observable时,我遇到了一个奇怪的错误. 这是代码的淡化版本,它提出了问题: import {Component, Input, OnInit, ViewChild} from '@a ...
1
angular – 与订阅的observable相关的Logout权限错误
问答我有一个组件,我订阅了一个observable来从Firebase中提取数据.相关的订阅代码类似于: [注意:下面更新/更正的代码.] // in my component ngOnInit() { ...
1
angular – 如何取消订阅/停止Observable?
问答我使用以下代码作为计时器: export class TimerService { private ticks: number = 0; private seconds: number = 0; pr ...
1