この共有サービスデータが表示されないのはなぜですか？

Question

私はAngularを初めて使っています。私は$ resourceを理解しておらず、十分に約束していると思います。

私は、Web APIから新しいデータを取得する検索サービスと、データを操作するためにコントローラがバインドできる共有サービスを持つ共有データシナリオを作成しようとしています。

しかし、コントローラの行に表示されるデータは、Web APIがretrieveServiceにデータを配信していることがわかりましたが、表示されることはありません。

誰でも正しい方向に向かうことができますか？

データ検索サービス：

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

私は、コントローラ間で共有データを実行する方法のためにJohn Papaからのアドバイスに従うことをしようとしている

<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> 

のhtml。ここで は、私が取得するためにしなければならなかった変更は、これが動作するようにしているFULL溶液で

UPDATE：

共有サービス：

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と言う必要があります。