knockout sans conteneur foreach ne fonctionne pas

Question

Je dois manquer quelque chose alors s'il vous plaît faites le moi savoir.
J'utilise Knockout 3.4.2

Toutes mes autres liaisons fonctionnent, mais foreach ne fonctionne tout simplement pas. Est-ce que je manque quelque chose?

Mon 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(""); 
     } 
    } 

Le IUser est basique:

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

dernier est mon point de vue:

<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> 

Le code HTML Rendus et le contexte du knock-out:

La console montrant les appels API:

Answer 1

J'ai finalement compris mon erreur et il était peu mais énorme en même temps.

Avant d'avoir dans mon 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); 
      }); 
    } 

je devais changer à ceci:

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); 
      }); 
    }