无法为使用ng-repeat发送到组件的任何对象生成圆环图

Question

我正在使用ng-repeat并向组件发送两个对象。 在组件内部，我创建了一个圆环图（应该显示每个对象的值），但由于某种原因，第一个圆环图是在ng-repeat的第一次运行的第一个上生成的（我甚至看到了这个单个甜甜圈上的2个对象的值）。最后，屏幕上只出现一个甜甜圈。

HTML：

<div>
   <canvas class="doughnut-chart" width="100" height="100"></canvas>
</div>

JavaScript的：

'use strict';

const appModule = angular.module('appModule');

appModule.component('appSeveritiesComponent', {
    templateUrl: '/app/components/severitiesComponent/severitiesComponent.html',
    controller: severitiesComponentController,
    bindings: {
        severities: '<'
    }
});

severitiesComponentController.$inject = ["$timeout"];

function severitiesComponentController($timeout) {
    var that = this;

    that.keys = function() {
        return Object.keys(that.severities);
    }

    $timeout(that.keys, 0); //wait dom is ready

    that.keys1 = function() {

        that.arr = [];
        for (var key in that.severities)
            that.arr.push(that.severities[key]);

        new Chart(document.getElementsByClassName("doughnut-chart"), {
            type: 'doughnut',
            animationEnabled: true,
            responsive: true,
            data: {
                labels: Object.keys(that.severities),
                labels: { display: false },
                datasets: [{
//                  label: "Population (millions)",
                    backgroundColor: ["rgb(213, 65, 65)", "rgb(243, 171, 16)", "rgb(65, 176, 213)"],
                    data: that.arr
                }]
            },
            options: {}
        });
    }

    $timeout(that.keys1, 0); //wait dom is ready

}