【问题标题】:Angular RC 1 - Find out when a subscribe succeedsAngular RC 1 - 找出订阅何时成功
【发布时间】:2016-08-31 20:38:00
【问题描述】:

自从迁移到 RC1 后,我遇到了一些问题,其中一个在我的一个组件中,我有一个服务,它从 laravel api 中获取一些 json 并订阅它,然后在组件中我有以下内容

        import {Component, ElementRef, OnInit} from '@angular/core';
        import {ProjectsMainApi} from "../../../services/projects-main";

        declare var jQuery: any;
        declare var subscribe: any;

        import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

        @Component({
            selector: 'projects',
            templateUrl: './app/components/Projects/list/index.html',
            directives: [ROUTER_DIRECTIVES]
        })

        export class ProjectsListComponent implements OnInit {

            elementRef: ElementRef;

            project: Object;

            constructor(elementRef: ElementRef, private _projectsmainapi: ProjectsMainApi) {
                this.elementRef = elementRef;
                this.project = this._projectsmainapi.project$;

                this._projectsmainapi.getProjectsMain();        
            }
            ngOnInit() {


                this.project.subscribe(() => {

                   alert('subscribed');

                });
            }
        }

失败的部分

                this.project.subscribe(() => {

                   alert('subscribed');

                });

在升级编译器之前编译这个没有问题并且它工作但是自从升级我得到这个错误错误 TS2339: Property 'subscribe' does not exist on type 'Object'。

我的服务文件根本没有改变,布局如下

    import {Http, Headers, Response} from "@angular/http"
    import {Injectable} from "@angular/core"
    import {IProjectsMain} from "../interfaces/IProjectsMain"
    import 'rxjs/Rx';
    import {Observable} from 'rxjs/Observable';
    import {Observer} from 'rxjs/Observer';
    import 'rxjs/add/operator/share';
    import 'rxjs/add/operator/map';

    @Injectable()
    export class ProjectsMainApi {

        apiUrl: string = "http://www.test.io/api/projects";

        headers: Headers = new Headers;

        project$: Observable<IProjectsMain[]>;

        private _ProjectsMainObserver: Observer<IProjectsMain[]>;

        private _dataStore: {

            project: IProjectsMain[]

        };

        constructor(private _http: Http) {

            this.headers.append('Content-Type', 'application/x-www-form-urlencoded');

            this.headers.append('X-Requested-With', 'XMLHttpRequest');

            //this.project$ = new Observable(observer => this._ProjectsMainObserver = observer).share();
            this.project$ = new Observable<IProjectsMain[]>(observer => this._ProjectsMainObserver = observer).share();
            this._dataStore = { project: [] };
        }

        public getProjectsMain() {

            this._http.get(this.apiUrl).map(response => response.json()).subscribe(data => {

                this._dataStore.project = data.project;

                this._ProjectsMainObserver.next(this._dataStore.project);

            }, error => console.log('Could not load projects.'),
                () => "doneskies");

        }

    }

花了一天的时间谷歌搜索和弄乱代码我不知道如何解决这个问题并让它编译所以现在我希望有人可能知道如何以另一种方式解决它,即我需要能够告诉订阅何时发生并且它成功但在我的组件中,最终结果应该触发我的组件文件中的警报

【问题讨论】:

    标签: angular angular2-directives angular2-services angular2-components


    【解决方案1】:

    将变量project 的类型更改为Observable&lt;any&gt;Observable&lt;IProjectsMain[]&gt;,就像在您的服务中一样。

    export class ProjectsListComponent implements OnInit {
        elementRef: ElementRef;
        project: Observable<any>;
    ...
    }
    

    它以前可以工作,因为您可能将tsconfig.json 更改为拥有?:

    "noEmitOnError": true 
    

    【讨论】:

    • 我会以你好先生的名字命名我的第一个孩子。很棒的东西,我什至不需要编辑我的 tsconfig,但你可能是对的,我已经更新了它,我不确定它之前有什么。我对 angular 2 很陌生,所以我只是好奇是否有任何安全问题或否则,将变量转换为任何变量还是标准做法..也只是为了在我的控制器中灵巧,我还添加了 import {Observable} from 'rxjs/Observable';以防其他人在开始时摸不着头脑
    • 谢谢@user3461985,不过这将是一个很长的名字;)。关于any 这不是为了便于阅读和在编译时收到警告的好习惯。但是,一旦您在运行时,对象的类型将不会有任何影响,因为默认情况下 javascript 没有类型检查。所以,安全方面,我怀疑使用any
    猜你喜欢
    • 2016-09-05
    • 2018-11-23
    • 2018-11-26
    • 2018-11-26
    • 2019-06-12
    • 2019-03-24
    • 2016-01-22
    • 2020-10-11
    • 1970-01-01
    相关资源
    最近更新 更多