不能绑定到“type”，因为它不是angular13中已知的“画布”属性

Question

我现在面临一个问题，当我试图创建一个股票数据图表时，我使用了一个有角度的免费API。问题是帆布包的问题。我用的是chart.js和NG2图表。我已经尝试了这么多的解决方案，如NPM安装或模块导入，但没有任何帮助我。

以下是我经常发现的错误：

错误NG8002:无法绑定到“chartType”，因为它不是“画布”的已知属性。错误NG8002:无法绑定到“chartType”，因为它不是“画布”的已知属性。错误NG8002:无法绑定到“数据集”，因为它不是“画布”的已知属性。

这是我的HTML代码

<div class='card'>
  <div class='card-header'>
    {{title}}
  </div>
  <div class="card-body"><br />

    <input (change)="onChange($event)" (keyup)="onKeyup($event)" class="form-control" type="text"
      placeholder="Search..." list="searchresults" autofocus />
    <datalist id="searchresults">
      <option *ngFor="let i of searchResults" value="{{i.symbol | uppercase}}">{{i.name | titlecase}}</option>
    </datalist>

    <br />

    <div class="form-group row" id="timeframe">
      <label class="col-sm-6 col-form-label" for="timeframe">Timeframe:</label>
      <div class="col-sm-6">
        <select (change)="onTimeChange($event.target.value)" class="form-control form-control-sm" name="timeframe">
          <option id="{{timeframes[timeframe.id].id}}" value="{{timeframes[timeframe.id].timeframe}}"
            selected="{{timeframes[timeframe.id].selected}}" *ngFor="let timeframe of timeframes">
            {{timeframes[timeframe.id].label}}</option>
        </select>
      </div>
    </div>

    <br />

    <canvas
      baseChart
      [chartType]="'bar'"
      [datasets]="chartData"
      [options]="chartOptions"
      [legend]="chartLegend"
      [labels]="chartLabels">
    </canvas>

  </div>
</div>





<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

这是我的ts代码：

import { Component, OnInit, NgModule } from '@angular/core';
import { FinanceServiceService } from 'src/app/services/finance-service.service';




@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})

export class DashboardComponent {
  title = 'ngFinance';
  searchResults = [];
  keyword: string = '';

  date$ = [];
  lineData$ = [];
  barData$ = [];
  dailyData = [];
  lineCount: number;

我这里还有一些代码，只是不想用这里的空间。

你可以在app.modules.ts上找到我的进口商品

...
import { ChartsModule } from 'ng2-charts';
...

Answer 1

您把ChartsModule放在@NgMdule导入表中了吗？

...
import { NgChartsModule } from 'ng2-charts';
...
@NgModule({
  declarations: [
  ...
  ],
  imports: [
   ...
    NgChartsModule
  ],
  ...
})

另外，你使用的是什么版本的NG2图表和chart.js？

Answer 2

如果你能分享的话，知道你使用的NG2图表的哪个版本会很有帮助。

有什么问题?

在最新版本的图表中，它们删除了不同对象中的许多属性，并更改了一些属性名称。这是一个链接。

图表配置正式文档

解决方案：

在这种情况下，需要定义图表的类型。您目前正在使用"chartType“。但是新的属性名是"type“。因此，您需要使用它来代替：

  [type]="'line'"