knockout containerless foreach가 작동하지 않음

Question

뭔가 빠져 있어야하므로 알려주세요.
사용 중 Knockout 3.4.2

다른 모든 바인딩이 작동하지만 foreach가 실행되지 않습니다. 내가 놓친 게 있니?

내 PageViewModel :

export class UserManagementViewModel implements IPageViewModel { 
     userApi: AjAxConnection<any>; 
     listOfUsers: KnockoutObservableArray<IUser>; 
     isLoading: KnockoutObservable<boolean>; 
     currentPage: KnockoutObservable<number>; 
     totalPages: KnockoutObservable<number>; 
     totalCount: KnockoutObservable<number>; 
     totalRecordsPerPage: KnockoutObservable<number>; 

     // New User 
     newUserEmail: KnockoutObservable<string>; 
     newUserFirstName: KnockoutObservable<string>; 
     newUserLastName: KnockoutObservable<string>; 
     newUserValidation: KnockoutValidationGroup; 

     constructor() { 
      this.userApi = new AjAxConnection("api/user"); 
      this.listOfUsers = ko.observableArray([]); 
      this.isLoading = ko.observable(false); 
      this.currentPage = ko.observable(0); 
      this.totalPages = ko.observable(0); 
      this.totalCount = ko.observable(0); 
      this.totalRecordsPerPage = ko.observable(10); 

      this.newUserEmail = ko.observable("").extend({ 
       required: {message: "Email Address is required."} 
      }); 
      this.newUserFirstName = ko.observable("").extend({ 
       required: {message: "First Name is required."} 
      }); 
      this.newUserLastName = ko.observable("").extend({ 
       required: {message: "Last Name is required."} 
      }); 

      this.newUserValidation = ko.validatedObservable({ 
       email: this.newUserEmail(), 
       firstName: this.newUserFirstName(), 
       lastName: this.newUserLastName() 
      }); 

     } 

     init(): void { 
      this.updateUserList(); 
     } 

     updateUserList(): void { 
      this.isLoading(true); 
      this.userApi.get("?page=" + this.currentPage() + "&totalPerPage=" + this.totalRecordsPerPage(), 
        ContentTypes.json) 
       .done((data: IPagableResourceModel<IUser>) => { 
        console.log(data); 
        if (data.isSuccessful) { 
         this.listOfUsers().push(data.results); 
        } else { 

        } 
       }).always(() => { 
        this.isLoading(false); 
       }); 
     } 

     openNewUserModal(): void { 
      $("#newUserModal").modal("show"); 
     } 

     cancelNewUserModal(): void { 
      this.closeNewUserModal(); 
      this.clearNewUserDetails(); 
     } 

     createNewUser(): void { 
      if (this.newUserValidation.isValid()) { 
       this.userApi.post("", 
        { 
         "firstName": this.newUserFirstName(), 
         "lastName": this.newUserLastName(), 
         "userName": this.newUserEmail() 
        }, 
        ContentTypes.json); 
      } 
     } 

     private closeNewUserModal(): void { 
      $("#newUserModal").modal("hide"); 
     } 

     private clearNewUserDetails(): void { 
      this.newUserEmail(""); 
      this.newUserFirstName(""); 
      this.newUserLastName(""); 
     } 
    } 

IUSER 기본입니다 :

export interface IUser { 
    id: string; 
    firstName: string; 
    lastName: string; 
    userName: string; 
} 

마지막

내보기입니다 :

<div id="Users" class="tab-pane active"> 
    <h3>Users</h3> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-2">Id</div> 
      <div class="col-md-2">UserName</div> 
      <div class="col-md-2">FullName</div> 
      <div class="col-md-2">Organization</div> 
      <div class="col-md-2">Clinic</div> 
      <div class="col-md-2">Options</div> 
     </div> 
     <div class="row" data-bind="visible: isLoading()"> 
      <div class="col-md-12 text-center"> 
       <img src="~/images/loading.gif" alt="Loading" /> 
       <br /> 
       Please wait, loading... 
      </div> 
     </div> 
     <div class="row" data-bind="visible: !isLoading() && listOfUsers().length == 0"> 
      <div class="col-md-12 text-center"> 
       No Users Found. 
      </div> 
     </div> 
     <div data-bind="visible: !isLoading() && listOfUsers().length != 0"> 
      <!--ko foreach: listOfUsers--> 
      <div class="row"> 
       <div class="col-md-2"><!--ko text: id--><!--/ko--></div> 
       <div class="col-md-2"><!--ko text: userName--><!--/ko--></div> 
       <div class="col-md-2"></div> 
       <div class="col-md-2"></div> 
       <div class="col-md-2"></div> 
       <div class="col-md-2">[OPTIONS GO HERE]</div> 
      </div> 
      <!--/ko--> 
     </div> 
    </div> 
</div> 

렌더링 된 HTML과 녹아웃 컨텍스트 :

콘솔은 API 호출을 보여주는 : 나는 마침내 내 실수를 파악하고 작은하지만 동시에 거대했다

Answer 1

.

내 PageViewModel이 있었다 전에 :

updateUserList(): void { 
     this.isLoading(true); 
     this.userApi.get("?page=" + this.currentPage() + "&totalPerPage=" + this.totalRecordsPerPage(), 
       ContentTypes.json) 
      .done((data: IPagableResourceModel<IUser>) => { 
       console.log(data); 
       if (data.isSuccessful) { 
        this.listOfUsers().push(data.results); 
       } else { 

       } 
      }).always(() => { 
       this.isLoading(false); 
      }); 
    } 

나는이로 변경했다가 :

updateUserList(): void { 
     this.isLoading(true); 
     this.userApi.get("?page=" + this.currentPage() + "&totalPerPage=" + this.totalRecordsPerPage(), 
       ContentTypes.json) 
      .done((data: IPagableResourceModel<IUser[]>) => { 
       console.log(data); 
       if (data.isSuccessful) { 
        this.listOfUsers().push(data.results); 
       } else { 

       } 
      }).always(() => { 
       this.isLoading(false); 
      }); 
    }