AngularJS Typescriptコントローラーの値が更新されないページ

Question

初めてAngularをピックアップし、.NETのバックグラウンドから来たときに、typescriptを使った方がはるかに快適です。

コントローラーがサービスから受信したオブジェクトでコントローラーの値を入力すると、ページ上で値が更新されないような問題が発生しました。私はおそらくnoobエラーを起こすだけです。

私が間違っていることに誰かがポインタを与えることができます。

だから私のtypescriptですが、私のhtmlビーイングと

module ConnectAdmin.Interfaces { 
    export interface ITemplate { 
     templateId: number; 
     name: string; 
     description: string; 
    } 
} 

module ConnectAdmin.Interfaces { 
    export interface ITemplateCollection { 
     total: number; 
     set: number; 
     skipped: number; 
     collection: Array<ITemplate>; 
    } 
} 

module ConnectAdmin.Controllers { 
    import TemplateCollection = Interfaces.ITemplateCollection; 

    export class TemplateIndexController { 
     static $inject = ["ConnectAdmin.Services.TemplateService"]; 

     constructor(templateService: ConnectAdmin.Services.TemplateService) { 
      this.defaultTemplates = { skipped: 0, set: 0, total: 0, collection: [] }; 
      this.templates = this.defaultTemplates; 
      this.processing = true; 
      this.store = this; 

      templateService.index(this.take, this.skip, this.successCallback, this.errorCallback); 

      this.processing = false; 
     } 

     successCallback(data: TemplateCollection) { 
      this.templates = { skipped: 0, set: 0, total: 0, collection: [] } 
      this.templates = data; 
      alert(this.templates.collection.length); 
     } 

     errorCallback(response: any) { 
      this.templates = this.defaultTemplates; 
      alert(response.status); 
      this.message = "An Error Occurred Contacting the API"; 
     } 

     processing: boolean; 

     store = this; 

     defaultTemplates: TemplateCollection; 
     templates: TemplateCollection; 

     take = 20; 
     skip = 0; 
     message: string; 
    } 

    angular.module("ConnectAdmin").controller("ConnectAdmin.Controllers.TemplateIndexController", TemplateIndexController); 
} 

module ConnectAdmin.Services { 
    import TemplateCollection = Interfaces.ITemplateCollection; 
    import TemplateIndexController = Controllers.TemplateIndexController; 

    export class TemplateService { 
     constructor($http: ng.IHttpService) { 
      this.http = $http; 
     } 

     http: ng.IHttpService; 

     index(take: number, skip: number, successCallback: Function, errorCallback: Function) { 
      const req = { 
       method: "GET", 
       url: "https://localhost:44336/api/Templates?take=" + take + "&skip=" + skip, 
       headers: { 
        "Content-Type": "application/json", 
        "Accept": "application/json" 
       } 
      }; 

      this.http(req).then(response => { 
        successCallback(response.data); 
       }, 
       response => { 
        errorCallback(response); 
       }); 

      //return { total: 1, skipped: 0, set: 1, collection: [{ templateId: 1, name: "Template 1", description: "" }] }; 
     } 
    } 

    angular.module("ConnectAdmin").service("ConnectAdmin.Services.TemplateService", TemplateService); 
} 

です：

<div id="template-index"> 
<div class="row"> 
    <div class="col-sm-12"> 
     <div class="info-box"> 
      <div class="info-box-title"> 
       Templates 
      </div> 
      <div class="info-box-content" ng-controller="ConnectAdmin.Controllers.TemplateIndexController as templateCtrl"> 
       <table class="table table-striped table-responsive"> 
        <thead> 
        <tr> 
         <td>#</td> 
         <td>Name</td> 
         <td>Description</td> 
        </tr> 
        </thead> 
        <tbody> 
        <tr class="tr-select" ng-click="templateCtrl.openTemplate(template.templateId)" ng-repeat="template in templateCtrl.templates.collection"> 
         <td>{{template.templateId}}</td> 
         <td>{{template.name}}</td> 
         <td>{{template.description}}</td> 
        </tr> 
        </tbody> 
       </table> 
       <div id="template-index-loader" class="loader" ng-show="templateCtrl.processing"></div> 
       <div class="info-box-footnote" ng-hide="templateCtrl.templates.collection.length"> 
        Displaying {{templateCtrl.templates.skipped + 1}} to {{templateCtrl.templates.set + templateCtrl.templates.skipped}} of {{templateCtrl.templates.total}} 
       </div> 
       <div class="info-box-footnote" ng-show="templateCtrl.message.length"> 
        {{templateCtrl.message}} 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

私はハードコーディングさを返す場合、私は何のアップデートを取得していないとして、私はそのHTTP呼び出しを考えていません。オブジェクト。

成功コールバックのアラートは私に正しい値を与えます。

おかげ

Answer 1

私の勘では、あなたの範囲はあなたの成功コールバックに変更されていることです。あなたが言うとき、そうでなければ、私は「これは」あなたがsuccessCallback機能の範囲偉大

Answer 2

ああを参照している、と思うあなたはこの

successCallback(data: TemplateCollection) { 
     store.templates = { skipped: 0, set: 0, total: 0, collection: [] } 
     store.templates = data; 
     alert(store.templates.collection.length); 
    } 

ようなあなたのコンストラクタで定義されたコントローラーのスコープを使用してみてください！ありがとう、あなたは私を正しい軌道に乗せました。

あなたは、私はインテリセンスの約束を得ていたと言っています。あなたはこれを意味していますか？同じ結果を出したストア。

その後、少し掘り出して、すべての変数は定義されていませんでした。

私がするコントローラとサービスを更新しました：

module ConnectAdmin.Controllers { 
    import TemplateCollection = Interfaces.ITemplateCollection; 

    export interface ITemplateIndexScope extends ng.IScope { 
     vm: any; 
    } 

    export class TemplateIndexController { 
     static $inject = ["ConnectAdmin.Services.TemplateService"]; 

     constructor(templateService: ConnectAdmin.Services.TemplateService) {    
      this.templates = { skipped: 0, set: 0, total: 0, collection: [] };       
      this.templateService = templateService; 
      this.take = 20; 
      this.skip = 0; 
      this.refresh(); 
     } 

     refresh() { 
      this.processing = true; 
      this.templateService.index(this.take, this.skip, this);    
     } 

     successCallback(data: TemplateCollection) {       
      this.templates = data;    
      alert(this.templates.collection.length); 
      this.processing = false; 
     } 

     errorCallback(response: any) { 
      this.templates = { skipped: 0, set: 0, total: 0, collection: [] }; 
      alert(response.status); 
      this.message = "An Error Occurred Contacting the API"; 
      this.processing = false; 
     } 

     processing: boolean; 
     templates: TemplateCollection; 
     take: number; 
     skip: number; 
     message: string; 
     templateService: Services.TemplateService; 
    } 

    angular.module("ConnectAdmin").controller("ConnectAdmin.Controllers.TemplateIndexController", TemplateIndexController); 
} 

module ConnectAdmin.Services { 
    import TemplateCollection = Interfaces.ITemplateCollection; 
    import TemplateIndexController = Controllers.TemplateIndexController; 

    export class TemplateService { 
     constructor($http: ng.IHttpService) { 
      this.http = $http; 
     } 

     http: ng.IHttpService; 

     index(take: number, skip: number, templateController: TemplateIndexController) { 
      const req = { 
       method: "GET", 
       url: "https://localhost:44336/api/Templates?take=" + take + "&skip=" + skip, 
       headers: { 
        "Content-Type": "application/json", 
        "Accept": "application/json" 
       } 
      }; 

      this.http(req).then(response => { 
        var data = response.data as TemplateCollection; 
        templateController.successCallback(data); 
       }, 
       response => { 
        templateController.errorCallback(response); 
       }); 
     } 
    } 

    angular.module("ConnectAdmin").service("ConnectAdmin.Services.TemplateService", TemplateService); 
} 

は、だから私は、コールバック関数ではなく、サービスにコントローラーのインスタンスを渡しています。

乾杯