Typescript＆Knockout.js Math.max calculated

Question

私が取り組んでいるウェブサイト用のダイナミックステップシステムを作成しようとしています。

現在のステップを表示し、条件に応じて現在および/または合計ステップを変更する必要があります。

ステップ1/2

ステップ2/2

残念ながら、私はそれは私にエラーを与えている理由を私は知らないので、診断するかどうかはわかりません問題に実行していますよ。

エラーは次のとおりです。 "キャッチされない例外TypeError：未定義のプロパティを読み取ることができません 'StepNumberOne'"

ここに私のコードです：

class ViewModel { 
 
    public IsStepOneActive: KnockoutObservable <boolean> ; 
 
    public IsStepTwoActive: KnockoutObservable <boolean> ; 
 

 
    public StepNumberOne: KnockoutComputed <number> ; 
 
    public StepNumberTwo: KnockoutComputed <number> ; 
 

 
    public Total: KnockoutComputed <number> ; 
 

 
    constructor() { 
 
    this.IsStepOneActive = ko.observable(true); 
 
    this.IsStepTwoActive = ko.observable(false); 
 

 
    this.StepNumberOne = ko.pureComputed(function() { 
 
     if (this.IsStepOneActive()) { 
 
     return 1; 
 
     } else { 
 
     return 0; 
 
     } 
 
    }); 
 

 
    this.StepNumberTwo = ko.pureComputed(function() { 
 
     if (this.IsStepTwoActive()) { 
 
     return 2; 
 
     } else { 
 
     return 0; 
 
     } 
 
    }); 
 

 
    this.Total = ko.computed(function() { 
 
     return Math.max(this.StepNumberOne(), this.StepNumberTwo); 
 
    }); 
 
    } 
 
} 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="target"> 
 
    <div> 
 
    <span data-bind="text: StepNumberOne"></span> 
 
    <span>/</span> 
 
    <span data-bind="text: Total"></span> 
 
    </div> 
 

 
    <div> 
 
    <span data-bind="text: StepNumberTwo"></span> 
 
    <span>/</span> 
 
    <span data-bind="text: Total"></span> 
 
    </div> 
 
</div>

Answer 1

あなたがのdata-bind属性inseteadを使用する必要がありますdata-binding

追加itionallyあなたは変更する必要があります。

ko.computed(() => { 
    return Math.max(this.StepNumberOne(), this.StepNumberTwo); 
}); 

範囲は申し訳ありませんが、これは私が作った例です