Question

在我的Angular JS应用程序中，我使用服务从中央数据位置（恰当地称为globalData）调用数据：

data.service.js：

angular.module('core').factory('dataService', function($http) {
  let properties = {
    globalData = {}
  }

  properties.subscribeTo = function(data) {
    return this.globalData[data];
  }

  properties.loadData = function(data) {
    // as per the component in the next section, data = 'myData'
    // I've left out some code here but essentially the string 'myData'
    // references an http url that is passed into the following $http.get
    $http.get('...').then(res => this.globalData[data] = res);
  }

  return properties;
}

然后在一个组件中：

myComp.component.js：

angular.module('myComp').component('myComp', {
  templateUrl: '...',
  controller: function(dataService) {
    this.$onInit = function() {
      this.subscribedData = () => dataService.subscribeTo('myData');
      if (!this.subscribedData()) dataService.loadData('myData');
    }
  }
});

myComp.template.html：

<div ng-repeat="data in $ctrl.subscribedData()">
  {{...}}
</div>

单独工作正常（我提供此背景代码，以防理解我来自哪里）。

现在说我从myData（通过dataService方法）返回的subscribeTo如下所示：

myData: [
  {id: '1', personId: '1', date: '2018-05-06', firstName: 'John', lastName: 'Smith', datum: 'age', oldValue: '64', newValue: '65'},
  {id: '2', personId: '1', date: '2018-05-06', firstName: 'John', lastName: 'Smith', datum: 'isRetired', oldValue: 'false', newValue: 'true'},
  {id: '3', personId: '1', date: '2018-05-07', firstName: 'John', lastName: 'Smith', datum: 'job', oldValue: 'banker', newValue: ''},
  {id: '4', personId: '2', date: '2018-05-08', firstName: 'Jane', lastName: 'Smith', datum: 'registeredSocialSecurity', oldValue: 'false', newValue: 'true'}
];

但我希望它看起来像这样：

myData = [
  {id: '2', personId: '1' date: '2018-05-06', firstName: 'John', lastName: 'Smith', data: [{datum: 'age', oldValue: '64', newValue: '65'}, {datum: 'isRetired' ,oldValue: 'false', newValue: 'true'}]},
  {id: '3', personId: '1', date: '2018-05-07', firstName: 'John', lastName: 'Smith', data: [{datum: 'isRetired', oldValue: 'false', newValue: 'true'}]},
  {id: '4', personId: '2', date: '2018-05-08', firstName: 'Jane', lastName: 'Smith', data: [{datum: 'registeredSocialSecurity', oldValue: 'false', newValue: 'true'}]},
];

所以我将以下函数添加到component：

myComp.component.js：

angular.module('myComp').component('myComp', {
  templateUrl: '...',
  controller: function(dataService) {
    this.$onInit = function() {
      this.subscribedData = () => dataService.subscribeTo('myData');
      if (!this.subscribedData()) dataService.loadData('myData');

      // New function here:
      this.alteredData = function() {
        let sub = (this.subscribedData() || []).reduce((obj, n) => {
          let key = n.personId + '_' + n.date;
          obj[key] = obj[key] || {};
          obj[key].data = obj[key].data || {};

          obj[key].id = n.id;
          obj[key].personId = n.personId;
          obj[key].date = n.date;
          obj[key].firstName = n.firstName;
          obj[key].lastName = n.lastName;

          obj[key].data[n.datum] = {
            datum: n.datum,
            oldValue: n.oldValue,
            newValue: n.newValue
          };
          return obj;
        }, {});

        for (let x in sub) {
          sub[x].data = Object.values(sub[x].data);
        }

        return Object.values(sub);
      }
    }
  }
});

但是，在模板上尝试使用$ctrl.alteredData()时，我会发现infdig错误。

有什么想法吗？

Answer 1

我找到了一种解决方案，该方法是预处理数据，然后将其分配到其他存储位置，然后将其发送出去。

properties.subscribeTo = function(data) {
    // _preProcessors is a function which handles the preprocessing, just to keep it "DRY"
    this.globalData[data + 'preP'] = this.globalData._preProcessors[data](this.globalData[data]);
    return this.globalData[data + 'preP'];
}

但是，我仍然试图找到一种方法来完成我想做的事情，不需要我在另一个位置设置新数据。因此，如果有人知道该怎么做，请回答。

尝试减少/改变数据时出现Infdig错误

1 个答案: