空数

Question

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

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

这些组件都使用ng-model并将this分配给变量vm。遵循John Papa风格指南的所有最佳实践。

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

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

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

以下是使用包含数组的对象的working example。

这里只是non working example使用数组。

您将看到一个无效的数据，您将清空数组然后添加它，它将不会在数据路径中保留数据。

Answer 1

  

您将清空数组然后添加它，它不会在路径中保留数据

第一个问题：在getAsync()方法中。

当你的model为空时，你每隔100毫秒就会调用callAtInterval()，而你永远无法解决你的承诺（无限循环）。

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

  

working example使用包含数组的对象。

为什么它有效：

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