数组作为空时服务中断的模型

Question

我有两个路由:一个有自定义组件,重复数组中的数据,允许用户添加和删除项目,另一个路由只显示模型.该模型存储在服务中.模型JSON数据如下所示:

[
    {name: "one"},
    {name: "two"},
    {name: "three"}
]

组件全部使用ng-model并分配this给变量vm.遵循John Papa风格指南的所有最佳实践.

如果我通过使用slice(),, pop()或将数组长度设置为0 来清空数组,它就会中断.您仍然可以向其添加数据,但如果您导航到其他路径,模型将显示为空数组.如果再次导航,则数组仍为空.

如果我使用键和数组作为值使我的模型成为对象,那么一切都按预期工作.所以我的问题是,这只是一个限制还是我做错了什么？

{
    myarray: [
        {name: "one"},
        {name: "two"},
        {name: "three"}
    ]
}

以下是使用包含该数组的对象的工作示例.

这里是使用数组的非工作示例.

你会看到一个不起作用的,你将清空数组然后添加它,它将不会在数据路径中保留数据.

Answer 1

你将清空数组然后添加到它,它将不会在数据中保留数据

第一个问题:在getAsync()方法中.

如果你model是空的,你callAtInterval()每100毫秒调用一次,你永远不会解决你的承诺(无限循环).

function getAsync() {         
        function callAtInterval() {
            if (!_.isEmpty(genericHttpModel.model)){
                $interval.cancel(promise);
                deferred.resolve(get());
            }                
        }
        var deferred = $q.defer();
        var promise = $interval(callAtInterval, 100);
        return deferred.promise;
    }

因此,当用户转到home(root)路线时:

 genericHttpService.getAsync().then(function(model){
      vm.model = model; // <-- never called 
    });

所以删除if (!_.isEmpty(genericHttpModel.model))声明

function callAtInterval() {                
     $interval.cancel(promise);
     deferred.resolve(get());
    }                
}

第二个问题:add方法:

 function add() {
       if (modelEmpty()) {
         initModelAndAddOne();
       } else {
        vm.model.push({});
      }
    }

在initModelAndAddOne您重置原始实例vm.model时:

 vm.model = [];

您的模型已经是空的,为什么要重新定义它=[],使其变得简单:

 function add() {
   vm.model.push({});
  }

Working Example Plunker

使用包含该数组的对象的工作示例.

那么为什么它有效:

• 第一个关闭_.isEmpty(genericHttpModel.model)将始终返回,false因为对象包含字段namesae:genericHttpModel.model = {names:[]}
• 第二 - 仅vm.model = []重置names字段而不重置服务对象