文章/答案/技术大牛

发布

社区首页 >问答首页 >Stackblitz对Visual？

问Stackblitz对Visual？
EN

Stack Overflow用户

提问于 2021-08-08 10:09:18

回答 2查看 329关注 0票数 0

从昨天开始，当我使用Stackblitz时图形工作正常，但是当我在角度12上复制代码时，我有几个错误。我不明白为什么？

Stackblitz上的代码是这里 (它可以工作)

我在Visual上有2条错误消息。

我在形象上的错误

或以下：

Error: src/app/line-chart/line-chart.component.html:3:64 - error TS2322: Type 'string' is not assignable to type 'ChartType'.

3 [options]="lineChartOptions" [legend]="lineChartLegend" [chartType]="lineChartType" [plugins]="lineChartPlugins">

src/app/line-chart/line-chart.component.ts:7:16
7   templateUrl: './line-chart.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component LineChartComponent.

我复制了下面的每一步：

ng new graphic 
ng g component line-chart
npm i chart.js@2.8.0
npm i ng2-charts@2.2.0

line-chart.component.html

<div style="display: block;">
  <canvas baseChart width="500" height="200" [datasets]="lineChartData" [labels]="lineChartLabels"
    [options]="lineChartOptions" [legend]="lineChartLegend" [chartType]="lineChartType" [plugins]="lineChartPlugins">
  </canvas>
</div>

line-chart.component.ts

import { Component, OnInit } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {
  public lineChartData: ChartDataSets[] = [
    { data: [61, 59, 80, 65, 45, 55, 40, 56, 76, 65, 77, 60], label: 'Apple' },
    { data: [57, 50, 75, 87, 43, 46, 37, 48, 67, 56, 70, 50], label: 'Mi' }
  ];

  public lineChartLabels: Label[] = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ];

  public lineChartOptions = {
    responsive: true
  };

  public lineChartLegend = true;
  public lineChartType = 'line';
  public lineChartPlugins = [];

  constructor() {}

  ngOnInit() {}
}

app.component.html

<app-line-chart>

</app-line-chart>

app-component.ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ChartsModule } from 'ng2-charts';
import { LineChartComponent } from './line-chart/line-chart.component';

@NgModule({
  imports: [BrowserModule, FormsModule, ChartsModule],
  declarations: [AppComponent, LineChartComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

hello.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input()
    name!: string; 
}

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Graphic</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <my-app></my-app>
</body>
</html>

如果你有什么想法，我很感兴趣，因为我想了解这个问题。

提前谢谢你的帮助。

angular

回答 2

Stack Overflow用户

发布于 2021-08-08 10:43:06

成功的是从Stackblitz下载这个项目。

将package.json文件的内容替换为：

{
  "name": "angular",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.1.0",
    "@angular/common": "^12.1.0",
    "@angular/compiler": "^12.1.0",
    "@angular/core": "^12.1.0",
    "@angular/forms": "^12.1.0",
    "@angular/platform-browser": "^12.1.0",
    "@angular/platform-browser-dynamic": "^12.1.0",
    "@angular/router": "^12.1.0",
    "chart.js": "2.8.0",
    "ng2-charts": "2.2.0",
    "rxjs": "^7.1.0",
    "tslib": "^2.3.0",
    "zone.js": "^0.11.4"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.0",
    "@angular/cli": "~12.2.0",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.3.5"
  }
}

若要在进行此更改后保持安全，请删除node_modules文件夹。

然后发出逗号npm i来安装所有所需的依赖项。

最后，npm start应该编译，没有任何问题。

票数 0

Stack Overflow用户

发布于 2021-08-08 11:54:43

在使用Angular12时，最好将严格检查留在上。它在很多方面都有帮助。

问题在于您为属性提供的变量应该是ChartType。肯定会在组件中导入ChartType类型。您可以查看该类型的定义，并了解该类型的外观。

然后给出提供变量的类型为ChartType

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68699751

复制

相似问题

问Stackblitz对Visual？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Stackblitz对Visual？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Stackblitz对Visual？
EN