角度d3不能与* ngFor唯一渲染

Question

我正在尝试将 angular-d3-donut 实施到我的网络应用程序中。每个都有一个 SVG（甜甜圈）。所以，如果我使用* ng生成，那么将有多个SVG（甜甜圈）。但问题是，如果我尝试通过* ngFor生成多个，只有一个正在创建并且多个SVG（圆环）嵌套在单个中。所以我得到设计不匹配和不同的结果。

HTML

<div class="row">
    <div class="col-md-3" *ngFor="let x of [1,2,3,4]; let myIndex = index">
         <angular-d3-donut  [data]="donutChartData" [outerRadius]=60 [innerRadius]=20 [spreadSlice]=true [iconWidth]=20 [iconHeight]=20 ></angular-d3-donut>
    </div>
</div>

Component.ts

public donutChartData = [{
        id: 0, // number
        label: 'A',  // string
        value: 70,  // number
        color: '#ccc',  // string,
        iconImage: 'https://avatars.discourse.org/v2/letter/a/a8b319/45.png' // string
    }, {
        id: 1, // number
        label: 'B',  // string
        value: 30,  // number
        color: '#DA4F49',  // string,
        iconImage: 'https://avatars.discourse.org/v2/letter/a/a8b319/45.png' // string
    }
]

检查HTML输出