Question

我正在为数据制作一个饼图。我正在使用Angular Chart（随后是charts.js）。

我的数据如下所示（vm是控制者）：

vm.persons = [
  {
    name:'smith',
    cart: [
      {
        id: 1,
        category: 'food'
      },
      {
        id: 2,
        category: 'clothes'
      }
    ]
  },
  {
    name: 'adams',
    cart: [
      {
        id: 3,
        category: 'automobile'
      },
      {
        id:1, category: 'food'
      }
    ]
  }
]

这样，我的模板如下：

<div ng-repeat="person in vm.persons">
  <div class="person-header">{{person.name}}</div>
  <!-- chart goes here -->
  <canvas class="chart chart-pie" chart-data="person.cart | chart : 'category' : 'data'" chart-labels="person.cart | chart : 'category' : 'labels'"></canvas>
  <div class="person-data" ng-repeat="item in person.cart">
    <div>{{item.category}}</div>
  </div>
</div>

我决定为图表选择过滤器，因为我认为这是适当的，干燥且可重复使用的：

angular.module('myModule').filter('chartFilter', function() {
  return function(input, datum, key) {
    const copy = JSON.parse(JSON.stringify([...input.slice()])); // maybe a bit overboard on preventing mutation...
    const entries = Object.entries(copy.reduce((o,n) => {o[n[datum]] = (o[n[datum]] || 0) + 1}, {}));
    const out = {
      labels: entries.map(entry => entry[0]);
      data: entries.map(entry => entry[1]);
    };
    return out[key];
  }
});

此工作，然后该图表的确显示了正确的数据。但是，对于每个控制台，它每次都会抛出一个infdig error。对于docs，这是因为我要返回一个新数组，这是因为它几乎是一组不同的数据。即使我摆脱了copy（这完全是一个单独的对象）并直接使用input（input.reduce(o,n)等），它仍然会引发错误。

我也尝试将其变成一个函数（在控制器中）：

vm.chartBy = (input, datum, key) => {
  const copy = JSON.parse(JSON.stringify([...input.slice()])); // maybe a bit overboard on preventing mutation...
  const entries = Object.entries(copy.reduce((o,n) => {o[n[datum]] = (o[n[datum]] || 0) + 1}, {}));
  const out = {
    labels: entries.map(entry => entry[0]);
    data: entries.map(entry => entry[1]);
  };
  return out[key];
};

并在模板中：

<canvas class="chart chart-pie" chart-data="vm.chartBy(person.cart, 'category', 'data')" chart-labels="vm.chartBy(person.cart, 'category', 'labels')"></canvas>

但是这也会引发infdig错误。

有人知道如何不每次都遇到infdig错误吗？这就是我要解决的问题。

Answer 1

正如您所指出的那样，您不能绑定到产生新数组的函数，否则摘要周期永远不会满足于新值与旧值匹配，因为数组引用每次都会更改。

相反，仅绑定到数据，然后在指令中实现过滤器，这样就不会绑定过滤的数据，只是在指令的模板中显示

。

HTML

<canvas class="chart chart-pie" chart-data="person.cart" chart-labels="person.cart"></canvas>

JavaScript

app.directive('chartData', function(){
    return {
        template: '{{chartData | chart : "category" : "data"}}',
        scope: {
            'chartData': '='
        }
    }
});

app.directive('chartLabels', function(){
    return {
        template: '{{chartLabels | chart : "category" : "labels"}}',
        scope: {
            'chartLabels': '='
        }
    }
});

app.filter('chart', function() {
    return function(input, datum, key) {
        ...
        return out[key];
    }
});

我已经在指令中对数据/键字符串进行了硬编码，但是如果需要，您可以将它们作为附加绑定传递。

Simple Mock-up Fiddle

过滤器/功能引起信号溢出

1 个答案: