如何在kendo图表模板中使用angular语法

import { Component } from '@angular/core';
import { ... } from '@progress/kendo-angular-charts';

@Component({
  selector: 'app-chart',
  template: `
    <kendo-chart [seriesColors]="colors" [title]="title">
      <kendo-chart-series>
        <kendo-chart-series-item *ngFor="let dataItem of data" [data]="dataItem.values" [name]="dataItem.name">
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="categories">
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
    </kendo-chart>
  `
})
export class ChartComponent {
  public title: string = 'Sales';
  public colors: string[] = ['#ff0000', '#00ff00', '#0000ff'];
  public data: any[] = [
    { name: 'Product A', values: [120, 200, 150, 180] },
    { name: 'Product B', values: [90, 150, 120, 160] },
    { name: 'Product C', values: [80, 100, 90, 120] }
  ];
  public categories: string[] = ['Jan', 'Feb', 'Mar', 'Apr'];
}

<kendo-chart [seriesColors]="colors" [title]="title">
  <kendo-chart-series>
    <kendo-chart-series-item *ngFor="let dataItem of data" [data]="dataItem.values" [name]="dataItem.name">
    </kendo-chart-series-item>
  </kendo-chart-series>
  <kendo-chart-category-axis>
    <kendo-chart-category-axis-item [categories]="categories">
    </kendo-chart-category-axis-item>
  </kendo-chart-category-axis>
</kendo-chart>