knockout containerless foreach not working

Question

I must be missing something so please let me know.
I am using Knockout 3.4.2

All my other bindings are working but the foreach just does not run. Am I missing something?

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

The IUser is basic:

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

Last is my View:

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

The Rendered HTML and the Knockout Context:

The Console showing the API Calls:

Answer 1

I finally figured out my mistake and it was little but huge at the same time.

Before I had this in my 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);
            });
    }

I had to change it to this:

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