ko.mappingは、私はインターフェイスを使用しようとすると、そのインターフェイス（IModelをモデル）に基づいてクラスを移入しています私のモデル

Question

を破壊するように思われます。私のインターフェースは、構造、名前、タイプと一致します。

ノックアウトビューモデルコード。

インタフェースIReferenceItem { ID：数。 テキスト：文字列。 }

interface IModel { 
    ID: KnockoutObservable<number>; 
    HasPromotion: KnockoutObservable<boolean>; 
    DebtPaymentTypeId: KnockoutObservable<number>; 
    Description: KnockoutObservable<string>; 
    DueDayOfMonth: KnockoutObservable<number>; 
    OpeningBalance: KnockoutObservable<number>; 
    StandardRate: KnockoutObservable<number>; 
    MinimumMonthlyPercentage: KnockoutObservable<number>; 
    MinimumMonthlyPayment: KnockoutObservable<number>; 
    PromotionEndDate: KnockoutObservable<Date>; 
    PromotionalRate: KnockoutObservable<number>; 
} 

class DebtViewModel { 

    PaymentTypes: KnockoutObservableArray<IReferenceItem>; 
    DaysOfMonth: KnockoutObservableArray<IReferenceItem>; 

    LoadedState: KnockoutObservable<boolean> = ko.observable(false); 
    Model: IModel; 

    constructor() { 
     var self = this; 

     $.get("/api/debt/1") 
      .done((data) => { 
       self.Model = ko.mapping.fromJS(data); 
       console.debug(data); 
       console.debug(self.Model.Description()); 
       alert(self.Model.ID()); 
       self.LoadedState(true); 
      }); 


     this.PaymentTypes = ko.observableArray([{ "id": 1, "text": "Fixed Amount" }, { "id": 2, "text": "Percentage based" }]) 
     this.DaysOfMonth = ko.observableArray([{ "id": 1, "text": "1st" }, { "id": 2, "text": "2nd" }, { "id": 3, "text": "3rd" }]) 

     ko.computed(() => { 
      if (self.LoadedState()) { 
       alert(self.Model.ID()); 
      } 
     }); 
    } 

    save = function() { 
     alert("Save Model back to the POST API call...."); 
    } 
} 
ko.applyBindings(new DebtViewModel()); 

私は私のモデルクラスに、API呼び出しからのデータをマップしようとしています。

dataは、API呼び出しの後に、有効なデータを持っています。

しかし、コンストラクタの外で、this.Modelは常に「未定義」であるようです。私はそれを正しく初期化していないからだと思います（Getの前に？）。

私のモデルは消えてしまったようです...または変更されたようです。

ko.mapping.fromJS(data, {}, this.Model);の行では、このモデルは後続の行と同様に未定義です。

私は間違っていますか？

Answer 1

コンストラクタでは、ローカルという変数selfを宣言しています。これはapi呼び出しの結果を受け取ります。

ただし、このコンストラクタの外側のどこでも、このローカル変数にはアクセスできません。 this.Modelを参照すると、このローカル変数を参照するのではなく、クラスプロパティModelを参照します。

あなたは既に矢印関数を使用しているので、私はあなたがこれを試すことができると思います：

class DebtViewModel { 

    ... 
    Model: IModel; 

    constructor() { 
     $.get("/api/debt/1") 
      .done((data) => { 
       this.Model = ko.mapping.fromJS(data); 
      }); 
     ... 
    } 

    save() { 
     var myModel = this.Model; 
     alert("Save Model back to the POST API call...."); 
    } 
}