Question

我在Angular 5中构建商店仪表板，显示路线中的订单和已到达的订单。当用户单击按钮时，它会将订单中的hasArrived字段设置为true。使用商店仪表板组件中的setInterval函数，我每秒都会进行一次API调用以获取订单数据并检查已提交的文件，以查看它是真还是假。在仪表板中，您可以看到订单从inRoute移动到单击此按钮后看似实时到达。唯一的问题是当inRoute数组中只有一个订单时，即使hasArrived切换为true，它仍会以inRoute顺序显示在屏幕上。只有刷新页面后才会更新到达到的部分。

setInterval(() =>{
      this.storeService.getStore(localStorage.getItem('storeId'))
        .subscribe((data) => {
            console.log(data);
            this.store = data;
            let ir = [];
            let ar = [];
            for(let order of data.orders){
                if(order.completedPurchase === false){
                    if(order.hasArrived === false){
                        ir.push(order);
                        this.inRoute = ir;
                    } 
                    if(order.hasArrived == true){
                        ar.push(order);
                        this.here = ar;
                    }
                }
            }
          }),
      error => console.log(error);
    }, 1000);

Answer 1

尝试以下代码：

SELECT

简而言之，我认为根本原因是当setInterval(() => { this.storeService.getStore(localStorage.getItem('storeId')) .subscribe((data) => { console.log(data); this.store = data; // do you need this? this.inRoute = []; this.here = []; (data.orders || []).forEach((order) => { if (!order.completedPurchase) { if (order.hasArrived) { this.here.push(order); } else { this.inRoute.push(order); } } }); }), error => console.log(error); }, 1000);的单个项目从this.inRoute更改为hasArrived时，您不会重新分配false。

我尽力保持尽可能不受影响，但有一些方面需要考虑：

尝试使用true：在先前数据到达后每秒获取订单
不要忘记清理：在销毁组件时调用setTimeout / clearInterval
我想可能有clearTimeout的解决方案，但我不熟悉它..

数组中的最后一项不会使用ajax请求进行更新

1 个答案: