Question

我有一个可观察的数组，其中包含我在页面上显示的对象。加载页面并每分钟不断刷新时，它会从服务器获取数据。

我编写了一个函数，如果添加了服务，则每秒将新数据从服务器加载到阵列中->添加集合，如果删除了服务->则删除集合。然后，我具有每分钟将数据推入/移出主阵列*的功能。

第一个问题是，当我单击其他页面上的删除按钮删除服务时，它不会从仪表板页面删除它。我发现了原因，但不知道该怎么办。

在第一个函数中，该函数应仅从服务器加载数据以删除集合，它无需使用.remove（）即可从主阵列*提供额外的擦除服务，并且不会更改页面。

将数据加载到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>

为什么我的代码删除没有.remove（）

1 个答案: