Question

我是Angular的新手，我的猜测是我不理解$ resource和承诺。

我正在尝试创建一个共享数据场景，其中我有一个检索服务，可以从Web api获取数据，以及我的控制器可以绑定到的共享服务以处理数据。

但是，即使我可以看到web api正在将数据传递给retrieveService，我期望在控制器行vm.lines = sharedService.getLines(this.id);中显示的数据也不会显示。

有人能在这方面向我推进正确的方向吗？

数据检索服务：

module services {
    "use strict";

    export interface IRetrievalService {
            getLines(id: string): ng.resource.IResourceClass<IResource>;
        }

    interface IResource extends ng.resource.IResource<app.ILine> { }

    export class RetrievalService implements IRetrievalService {

        static $inject = ['$resource'];
        constructor(private $resource: ng.resource.IResourceService) {

        }

        getLines(id: string): angular.resource.IResourceClass<IResource> {
            return this.$resource("api/myUrl/?id=" + id);
        }
    }

    angular
        .module("services")
        .service("app.services.retrievalService", RetrievalService );
}

共享服务

module services {
    "use strict";

    export interface ISharedService {
        _lines: app.ILine[];
        getLines(id: string): app.ILine[];
    }

    export class SharedService implements ISharedService {
        _lines: app.ILine[];

        static $inject = ["app.services.retrievalService"];
        constructor(private dataService: app.services.DataService) {

        }

        getLines(id: string): app.ILine[] {
            if (!this._lines) {
                var resource = this.dataService.getLines(id);
                resource.query((data: app.ILine[]) => {
                    this._lines = data
                });
            }

            return this._lines;
        }
    }

    angular
        .module("services")
        .service("app.services.sharedService", SharedService);
}

控制器/组件

module app {
    "use strict";

    interface ILinesScope {
        id: string;
        lines: app.ILine[];
    }

    class LinesComponentController implements ILinesScope {
        id: string;
        lines: app.ILine[];

        static $inject = ["app.services.sharedService"];
        constructor(private sharedService: services.SharedService) {
            var vm = this;

            vm.id = "5";
            vm.lines = sharedService.getLines(this.id);
        }
    }

    class LinesComponent implements ng.IComponentOptions {
        templateUrl = "app/Lines.html";
        controllerAs = "vmLines";
        controller = ["app.services.sharedService", LinesComponentController];
    }

    angular.module("app")
        .component("myLines", new LinesComponent());
}

HTML

<div>
    <table>
        <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="line in vmLines.lines">
            <td>{{line.col1}}</td>
            <td>{{line.col2}}</td>
        </tr>
        </tbody>
    </table>
</div>

我正在尝试遵循John Papa的建议，了解如何跨控制器共享数据。

使用完整解决方案更新 以下是我必须做出的改变才能使其发挥作用：

共享服务：

module services {
    "use strict";

    export interface ISharedService {
        //_lines: app.ILine[];
        _lines: ng.resource.IResourceArray<ng.Resource.IResource<ILine>>
        //getLines(id: string): app.ILine[];
        getLines(id: string): ng.resource.IResourceArray<ng.Resource.IResource<ILine>>

    }

    export class SharedService implements ISharedService {
        //_lines: app.ILine[];
        _lines: ng.resource.IResourceArray<ng.Resource.IResource<ILine>>

        static $inject = ["app.services.retrievalService"];
        constructor(private dataService: app.services.DataService) {

        }

        //getLines(id: string): app.ILine[] {
        getLines(id: string): ng.resource.IResourceArray<ng.Resource.IResource<ILine>> {
            var vm = this;
            if (!this._lines) {
                var resource = this.dataService.getLines(id);
                return resource.query();
                //resource.query((data: app.ILine[]) => {
                //    this._lines = data
                //});
            }

            return this._lines;
        }
    }

    angular
        .module("services")
        .service("app.services.sharedService", SharedService);
}

控制器/组件：

module app {
    "use strict";

    interface ILinesScope {
        id: string;
        //lines: app.ILine[];
        lines: ng.resource.IResourceArray<ng.Resource.IResource<ILine>>;
    }

    class LinesComponentController implements ILinesScope {
        id: string;
        //lines: app.ILine[];
        lines: ng.resource.IResourceArray<ng.Resource.IResource<ILine>>;

        static $inject = ["app.services.sharedService"];
        constructor(private sharedService: services.SharedService) {
            var vm = this;

            vm.id = "5";
            vm.lines = sharedService.getLines(this.id);
        }
    }

    class LinesComponent implements ng.IComponentOptions {
        templateUrl = "app/Lines.html";
        controllerAs = "vmLines";
        controller = ["app.services.sharedService", LinesComponentController];
    }

    angular.module("app")
        .component("myLines", new LinesComponent());
}

Answer 1

我认为这是因为您需要从服务中返回$resource.query。

getLines(id: string): app.ILine[] {
   if(!this._lines) {
      var resource = this.dataService.getLines(id);
      return resource.query((data: app.ILine[]) => {
         this._lines = data
      });
   }
   return this._lines;
}

Answer 2

当断点this._lines = data调试器命中它时？这种方式让我想起this未定义的常见问题。您可能需要在回调函数之外执行var self = this，然后说出self._lines = data

为什么这个共享的Angular服务数据没有显示？

2 个答案: