angular - ループでチャートデータを取得し、Angular 2 でチャートに割り当てる

Question

Angular 2 Web アプリケーションでng2-chartsコンポーネントを使用してチャートを表示しています。既製のサンプルは、Angular と TypeScript を使用して Web ページにグラフを表示するというかなりのアイデアを与えてくれました。

HTML Web ページの Angular タグ

<base-chart class="chart"
                [data]="doughnutChartData"
                [labels]="doughnutChartLabels"
                [chartType]="doughnutChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></base-chart> 

タイプスクリプト

import {Component} from '@angular/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';

import {CHART_DIRECTIVES} from '../../../ng2-charts';

// webpack html imports
let template = require('./doughnut-chart-demo.html');

@Component({
  selector: 'doughnut-chart-demo',
  template: template,
  directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class DoughnutChartDemoComponent {
  // Doughnut
  public doughnutChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
  public doughnutChartData:number[] = [350, 450, 100];
  public doughnutChartType:string = 'doughnut';

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }
}

ただし、各ウィジェットがチャート コンポーネントを持つ複数のデータ ウィジェットの場合。データをチャートにバインドするにはどうすればよいですか?

statusプロパティを探して、 siteDataオブジェクトのリストをループします。このプロパティをチャート データに割り当てます。

<template ngFor #item [ngForOf]="siteData" #i="index">
    <div class="box-body box-profile">
                <h1 class="profile-username text-center" style="text-align: left;font-size: 25px;font-weight: 500;">{{item.siteName}}</h1>
                <hr style="font-family: Helvetica, Arial, Sans Serif;background: #E8EAEB;min-height: 100%;width: 100%;font-size: 0.9vw;"/>
                <h1 class="profile-username text-center" style="text-align: left;">Summary</h1>
                <ul class="products-list product-list-in-box">
                    <li class="item">
                        <base-chart class="chart"
                                    [data]="item.status"
                                    [chartType]="siteChartType"
                                    (chartHover)="siteChartHovered($event)"
                                    (chartClick)="siteChartClicked($event)">
                        </base-chart>
                    </li>
                    </ul>

            </div>
</template>

ただし、これは機能しません。データを文字列として受け入れています.!!!

例: ステータス (データ型番号) が 85 の場合、

[data]="item.status"

チャートはこれをそれぞれ「8」と「5」として受け入れます。

しかし、これを単純なタグで検証すると、

口ひげ (ダブル カール ブレース)

<h1 class="headline text-green">{{item.status}}</h1>

必要なデータを取得します。つまり、 85 が印刷されます

データをチャートに割り当てる際にどこが間違っているのかわかりません。

正しい方向へのガイダンスは大歓迎です