由于它不是“图表”的已知属性，因此无法绑定到“选项”

本文介绍了由于它不是“图表”的已知属性，因此无法绑定到“选项”的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我创建了一个使用 Angular2-highcharts 的图表模块，但是当我尝试运行应用程序时，我收到了错误信息。错误错误：Uncaught（在承诺中）：错误：模板解析错误：由于它不是已知属性，因此无法绑定到选项 '图表'。（ <图表[错误 - >] [options] =chartOptions type =chart>< / chart> < / ion-content> ）：ng：///KeyinfoPageModule/KeyinfoPage.html@27：9 '图表'不是已知的元素： 1.如果'chart'是一个Angular组件，那么请验证它是否为该模块的一部分。 2.允许任何元素将'NO_ERRORS_SCHEMA'添加到此组件的'@ NgModule.schemas'中。（< ion-content> 代码 1. app.module.ts 从'angular2-highcharts'导入{ChartModule}; 导入*为'Highcharts'的高图; 导入：[ --------- ChartModule.forRoot（高图） ]， 2。html文件 < ion-content> < chart [options] =chartOptionstype =chart>< / chart> < / ion-内容> 3 .ts文件 export class KeyinfoPage { chartOptions：any; constructor（public navCtrl：NavController）{} ionViewDidLoad（）{ this.chartOptions = {chart：{ type：'area'}， title：{ text：'美国和苏联核库存'}，副标题：{ text：'来源：< a href =http：//thebulletin.met apress.com/content/c4120650912x74k7/fulltext.pdf\">'+ 'thebulletin.metapress.com< / a>'}， xAxis：{ allowDecimals： false，标签：{ formatter：function（）{ return this.value; // $ clean，unformatted number for year } } }， yAxis：{ title：{ text：'Nuclear weapon states'}，标签：{ formatter：function（）{ return this.value / 1000 +'k'; } } }，工具提示：{ pointFormat：'{series.name}制作完成 {point.y：，。0f}< ; / b> 在{point.x}'}，中的弹头plotOptions：{ area：{ pointStart：1940， marker：{ enabled：false， symbol：'circle'， radius：2， states：{悬停：{ enabled：true } } } } }，系列：[{ name：'USA'， data： [null，null，null，null，null，6,11,32,110,235,369,640， 1005,1436,2063,3057,4618,6444,9822,15468,20434,24126， 27387,29459,31056,31982,32040,312333,29224,27342,26662， 26956,27912,28999,2865,27826,25579,25222,24826,24605， 24304,23464 ，23708,24099,24357,24237,2440 1,24344,23586， 22380,21004,17287,14747,13076,12555,12144,11009,10950， 10871,10824,10577,10527,10475,10421,10358,10295,10104， }，{名称：'USSR / Russia'， data：[null，null，null，null，null，null，null，null，null， 5,25,50,120,150,200,426,660,869,1060,1605,2471,3322， 4238,5221,6129,7089,8339,9399,10538,11643,13092,14478， 15915,17385,19055,21205,23044,25393,27935,30062,32049， 33952,35804,37431,39197,45000,43000,41000,39000,37000， 35000， 35000， 33000,31000,29000,27000,25000,24000,23000,22000， 21000,20000,19000,18000,18000,17000,16000] }] } 控制台.log（'ionViewDidLoad KeyinfoPage'）; viewDashboard（）{ this.navCtrl.setRoot（'DashboardPage'）} } 请帮我解决这个问题。我发现了这样的几个问题，但没有人帮助我解决这个错误。我正在关注此视频以创建图表 https://www.youtube.com/watch?v=FSg8n5_uaWs&index = 2& list = LLTJRcsGtG-ZMAf9dklVIikA& t = 610s keyinfo.module.ts 从'@ angular / core'导入{NgModule}; 从'ionic-angular'导入{IonicPageModule}; 从'./keyinfo'导入{KeyinfoPage}; 从'angular2-highcharts'导入{ChartModule}; 导入*为'highcharts'的高级图表; $ b @NgModule（{声明：[ KeyinfoPage，]，进口：[ IonicPageModule.forChild（KeyinfoPage）， ChartModule ]，}） export class KeyinfoPageModule {} 从'angular2-highcharts'导入{ChartModule}; 导入*为'highcharts'的高级图表; $ b @NgModule（{声明：[ KeyinfoPage，]，进口：[ IonicPageModule.forChild（KeyinfoPage）， ChartModule.forRoot（highcharts）]，}） export class KeyinfoPageModule {} I have created a chart module using Angular2-highcharts but when I try to run the application I am getting the followoing error.ERROR Error: Uncaught (in promise): Error: Template parse errors:Can't bind to 'options' since it isn't a known property of 'chart'. (" <chart [ERROR ->][options]="chartOptions" type="chart"></chart></ion-content>"): ng:///KeyinfoPageModule/KeyinfoPage.html@27:9'chart' is not a known element:1. If 'chart' is an Angular component, then verify that it is part of this module.2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<ion-content>Code1. app.module.tsimport { ChartModule } from 'angular2-highcharts';import * as highcharts from 'Highcharts';imports: [---------ChartModule.forRoot(highcharts) ],2. html File<ion-content> <chart [options]="chartOptions" type="chart"></chart></ion-content>3. .ts file export class KeyinfoPage { chartOptions:any; constructor(public navCtrl: NavController) { } ionViewDidLoad() { this.chartOptions={chart: { type: 'area' }, title: { text: 'US and USSR nuclear stockpiles' }, subtitle: { text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' + 'thebulletin.metapress.com</a>' }, xAxis: { allowDecimals: false, labels: { formatter: function () { return this.value; // clean, unformatted number for year } } }, yAxis: { title: { text: 'Nuclear weapon states' }, labels: { formatter: function () { return this.value / 1000 + 'k'; } } }, tooltip: { pointFormat: '{series.name} produced {point.y:,.0f} warheads in {point.x}' }, plotOptions: { area: { pointStart: 1940, marker: { enabled: false, symbol: 'circle', radius: 2, states: { hover: { enabled: true } } } } }, series: [{ name: 'USA', data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104] }, { name: 'USSR/Russia', data: [null, null, null, null, null, null, null, null, null, null, 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 21000, 20000, 19000, 18000, 18000, 17000, 16000] }] } console.log('ionViewDidLoad KeyinfoPage'); } viewDashboard(){ this.navCtrl.setRoot('DashboardPage') }}Please help me to solve this issue. I have found several questions like this but none of them helped me to solve this error. I am following this video to create the chartshttps://www.youtube.com/watch?v=FSg8n5_uaWs&index=2&list=LLTJRcsGtG-ZMAf9dklVIikA&t=610skeyinfo.module.ts import { NgModule } from '@angular/core';import { IonicPageModule } from 'ionic-angular';import { KeyinfoPage } from './keyinfo';import { ChartModule } from 'angular2-highcharts';import * as highcharts from 'highcharts';@NgModule({ declarations: [ KeyinfoPage, ], imports: [ IonicPageModule.forChild(KeyinfoPage), ChartModule ],})export class KeyinfoPageModule {} 解决方案 You can set import the HighChartsModule in the IonicPageModule in which it is used instead of the app.module.tsimport { ChartModule } from 'angular2-highcharts';import * as highcharts from 'highcharts'; @NgModule({ declarations: [ KeyinfoPage, ], imports: [ IonicPageModule.forChild(KeyinfoPage), ChartModule.forRoot(highcharts) ], }) export class KeyinfoPageModule {} 这篇关于由于它不是“图表”的已知属性，因此无法绑定到“选项”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！