Warum werden diese gemeinsamen Angular Service-Daten nicht angezeigt?

Question

Ich bin neu in Angular, und meine Vermutung ist, ich verstehe $ Ressource nicht und verspricht genug.

Ich versuche ein gemeinsam genutztes Datenszenario zu erstellen, in dem ich einen Abrufdienst habe, der Daten aus einer Web-API erhält, und einen freigegebenen Dienst, an den meine Controller zum Arbeiten mit den Daten gebunden werden können.

Die Daten, die ich in der Controller-Zeile vm.lines = sharedService.getLines(this.id); anzeigen möchte, werden jedoch nie angezeigt, obwohl ich sehen kann, dass die Web-API die Daten an den retrievalService liefert.

Kann mich jemand hier in die richtige Richtung schubsen?

Data Retrieval Service:

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); 
} 

Shared Service

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); 
} 

Controller/Component

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> 

Ich versuche, Rat folgen von John Papa auf, wie gemeinsam genutzte Daten auf den Controllern zu tun.

UPDATE MIT VOLL SOLUTION Hier sind die Änderungen, die ich diese Arbeit machen musste zu bekommen:

Shared Service:

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); 
} 

Controller/Komponente:

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

Ich denke, es ist, weil Sie $resource.query von Ihrem Dienst zurückgeben müssen.

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

wenn Sie den Breakpoint this._lines = data tut Debugger Hit es? Diese Art erinnert mich an das allgemeine Problem, bei dem this nicht definiert ist. Möglicherweise müssen Sie var self = this außerhalb der Callback-Funktion tun und dann sagen self._lines = data