넉 아웃 Typescript viewmodel 함수가 정의되어 있지 않습니다.

Question

내 모델에서 선언 한 함수를 사용할 수없는 문제가 있습니다. 나에게는 기능이 존재하는 것 같아서 콘솔이 왜 존재하지 않는다고 말하는지 모르겠습니다.

class ExamAttempt { 
    questions: KnockoutObservableArray<ExamQuestion>; 
    open: KnockoutObservable<boolean>; 

    constructor(questions: any) { 
     this.questions = ko.observableArray<ExamQuestion>(questions); 
     this.open = ko.observable<boolean>(false); 
    } 

    public toggleOpen(): void { 
     this.open(!this.open()); 
    } 
} 

class ExamQuestion { 
    question: KnockoutObservable<string>; 
    answer: KnockoutObservable<string>; 
    time: KnockoutObservable<number>; 

    constructor(question: string, answer: string, time: number) { 
     this.question = ko.observable<string>(question); 
     this.answer = ko.observable<string>(answer); 
     this.time = ko.observable<number>(time); 
    } 

    public formatQuestion(index: number): string { 
     return `${index + 1}. ${this.question()}`; 
    } 
} 

class EditUserProfileModel { 
    examAttempts: KnockoutObservableArray<ExamAttempt>; 

    constructor(params: any) { 
     this.examAttempts = ko.observableArray<ExamAttempt>(params.examAttempts); 
    } 
} 

적용 바인딩 (params 페이지 모델 직렬화) :이 내 시야 모델 (ommitted 관련이없는 필드)이다

<div class="col-lg-6"> 
    <div class="page-header"> 
     <h3>Examens</h3> 
    </div> 
    <!-- ko foreach: examAttempts --> 
    <div class="panel-header clickable" data-bind="click:() => toggleOpen()"> 
     <h3 class="d-block"> 
      Examen poging #<span data-bind="text: $index"></span> 
      <span class="pull-right" data-bind="css: { fa: true, 'fa-chevron-left': !open(), 'fa-chevron-down': open() }"></span> 
     </h3> 
    </div> 
    <div class="panel-body" data-bind="visible: open"> 
     <!-- ko foreach: questions --> 
     <p> 
      <b><span data-bind="text: formatQuestion($index)"></span></b> 
      <br /> 
      <span data-bind="text: answer"></span> 
      <br /> 
      <i>Beantwoord in: <span data-bind="text: time"></span> seconde(s)</i> 
     </p> 
     <!-- /ko --> 
    </div> 
    <br /><br /><br /> 
    <!-- /ko --> 
</div> 

:

나는 여기에 내보기의 관련 부분을 추출한 :

ko.applyBindings(new EditUserProfileModel(params)); 

오류가 발생했습니다 (글쎄, 그들은 단지 functio NS는 정의되지 않습니다,하지만 그들은 안처럼 나에게)이 보인다

어떤 제안을 크게 감상 할 수있다.

Answer 1

네, 알아 냈습니다. 유형에 문제가있었습니다. 확실하게, 비록 params.examAttempts이 ExamAttempt 클래스와 동일한 구조 및 필드를 가지고 있지만, js/ts는 ExamAttempt 클래스에서 정의되었으므로 여기에서 문제가되었던 ExamAttempt의 인스턴스로 변환하지 않습니다. 내 잘못이야!.

@adiga, 시간을내어 바이올린을 만들어 주셔서 감사합니다. 속으로

이

this.examAttempts = ko.observableArray<ExamAttempt>(params.examAttempts) 

:`params.examAttempts` 무엇

this.examAttempts = ko.observableArray<ExamAttempt>(params.examAttempts.map((ea: any) => { 
    let questions = ea.questions.map((eaq: any) => { 
     return new ExamQuestion(eaq.question, eaq.answer, eaq.time); 
    }); 

    return new ExamAttempt(questions); 
}));