Почему мой код удаляет объекты без .remove ()

Question

У меня есть наблюдаемый массив * с объектами, которые я отображаю на странице.Он берет данные с сервера, когда я загружаю страницу и постоянно обновляю каждую минуту.

Я написал функцию, которая каждую секунду загружает новые данные с сервера в массивы, если служба добавлена ​​-> добавить сбор, если служба удалена -> Снять собрание.Тогда у меня есть функция, которая передает / удаляет данные в / из основного массива * каждую минуту.

Первая проблема заключается в том, что когда я нажимаю кнопку удаления на другой странице, чтобы удалить службу, она не стирает ее со страницы панели мониторинга.,Я узнал почему, но не знаю, что делать.

В первой функции, где он должен просто загружать данные с сервера, чтобы удалить собрание, он дополнительно удаляет службу из основного массива * без .remove () и нене изменять страницу.

Функция для загрузки данных в удаляемую коллекцию.

ActualData.forEach(function (element) {
                serviceId_ActualData = element.serviceId;
                let checkAvailability = serviceId_DataFromServer_Array.some(serviceId => serviceId_ActualData === serviceId);
                if (checkAvailability === false) {
                    toRemove.push(element);
                    ActualData.splice(ActualData.indexOf(element), 1); // THIS ROW REMOVE OBJECT FROM MAIN ARRAY*
                }

            }); 

Функция для перемещения / удаления коллекций в / из основного массива *

 function DisplayRefreshedData() {
            if (toAdd.length > 0) {                           
                self.services.push(toAdd);                     
                toAdd.splice(0, toAdd.length);                
            }
            if (toRemove.length > 0) {                         //
                self.services.remove(toRemove);                // THIS SHOULD REMOVE IT AND CHANGE THE PAGE CONTENT
                toRemove.splice(0, toRemove.length);           //
            }
        }
        setInterval(DisplayRefreshedData, 60000);

Вторая проблема - добавление.Он правильно добавляет службу в основной массив, но дважды отображает ее на странице.Когда я не очищаю toAdd colection, он отображает две одинаковые службы на панели инструментов, когда я делаю это, отображается только одна и одна ошибка, что служба не определена.В этом случае я понятия не имею, в чем проблема, поэтому я дам вам весь код JavaScript наверняка .:/

     function ServicesViewModel() {
        var self = this;

        self.services = ko.observableArray([]);
        self.lastCheck = ko.observable();
        var ActualData = [];
        var DataFromServer = []; 
        var toAdd = [];
        var toRemove = [];

        $.getJSON("http://localhost:55972/api/status", function (data) {
            self.services(data.services);
            self.lastCheck = data.lastCheck;                        // FIRST LOAD WHEN PAGE IS LOADED
            ActualData = data.services;  
            DataFromServer = data.services;
        });

        function DashboardRefresh() {
            var serviceId_ActualData_Array = [];
            var serviceId_DataFromServer_Array = [];

            $.getJSON("http://localhost:55972/api/status", function (data) {
                DataFromServer = data.services;
            });

            ActualData.forEach(function (element) {
                serviceId_ActualData_Array.push(element.serviceId);
            });

            DataFromServer.forEach(function (element) {         // THIS LOADING DATA TO toAdd COLECTION
                serviceId_DataFromServer = element.serviceId;
                serviceId_DataFromServer_Array.push(element.serviceId);
                let checkAvailability = serviceId_ActualData_Array.some(serviceId => serviceId_DataFromServer === serviceId);
                if (checkAvailability === false) {
                 toAdd.push(element);
                 ActualData.push(element);              
                }

            });   

            ActualData.forEach(function (element) {
                serviceId_ActualData = element.serviceId;
                let checkAvailability = serviceId_DataFromServer_Array.some(serviceId => serviceId_ActualData === serviceId);
                if (checkAvailability === false) {
                    toRemove.push(element);
                    ActualData.splice(ActualData.indexOf(element), 1); // THIS ROW REMOVE OBJECT FROM MAIN ARRAY*
                }

            }); 

        }
        setInterval(DashboardRefresh, 1000);

        function DisplayRefreshedData() {
            if (toAdd.length > 0) {                           
                self.services.push(toAdd);                     // ADDING DATA TO MAIN ARRAY* 
                toAdd.splice(0, toAdd.length);                
            }
            if (toRemove.length > 0) {                         //
                self.services.remove(toRemove);                // THIS SHOULD REMOVE IT AND CHANGE THE PAGE CONTENT
                toRemove.splice(0, toRemove.length);           //
            }
        }
        setInterval(DisplayRefreshedData, 60000);


    }
    ko.applyBindings(new ServicesViewModel());

Answer 1

Вы нажимаете ссылки на массивы toAdd и toRemove, не добавляя / не удаляя их отдельные значения.

Чтобы удалить все значения из массива, вы можете использовать ko.observableArray.fn.removeAll.

Чтобы добавить несколько значений, вы можете выбрать любое из:

• obsArray.push(...toAdd);
• obsArray(obsArray().concat(toAdd));
• obsArray.push.apply(obsArray, toAdd);
• toAdd.forEach(x => obsArray.push(x))
• ...

const toAdd =     [ 1, 2, 3, 4, 5];
const toRemove =  [    2, 3, 4   ];

const obsArray = ko.observableArray([]);
console.log("obsArray before mutations:", obsArray());

obsArray.push.apply(obsArray, toAdd);
console.log("obsArray after add:", obsArray());

obsArray.removeAll(toRemove);
console.log("obsArray after remove:", obsArray());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>