0

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

数据服务.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错误。

有任何想法吗？

4

1 回答 1

0

我找到了一个解决方案，就是对数据进行预处理，然后将其分配到不同的存储位置，然后将其发送出去。

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'];
}

但是，我仍在尝试找到一种方法来完成我正在尝试做的事情，这不需要我在另一个位置设置新数据。所以如果有人知道如何做到这一点，请回答。

于 2018-06-20T03:19:47.870 回答