我是学习Angular 6的新手，执行以下代码时遇到错误。敬请任何帮助者解决此问题。
我在浏览器控制台中遇到错误，并在下面找到文件以供参考。 错误：
Uncaught Error: Can't resolve all parameters for AppComponent: (?).
at syntaxError (compiler.js:1016)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:10917)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:10810)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:10429)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:11013)
at compiler.js:10673
at Array.map (<anonymous>)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10673)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23846)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23827)
下面是应用程序组件文件
app.Component.ts
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Subscription,Observable } from 'rxjs';
import { AppService } from './app.service';
import { HttpClient } from '@angular/common/http';
import { Chart } from 'angular-highcharts';
import 'rxjs/add/operator/catch';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy, OnInit {
title = 'my-project';
@Input() showMePartially: boolean;
options: any;
data: number;
chart: any;
dataSubscription: Subscription;
chartData$ : Object;
constructor(public appService: AppService) {
this.options = {
chart: { type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false, },
// legend: { enabled: false },
credits: { enabled: false },
tooltip: {
// pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false,
// format: '<b>{point.name}</b>: {point.percentage:.1f} %',
}
}
},
series: [{
name: 'Dispo',
data: []
}]
};
}
// onPointSelect (e) {
// this.point = e.context.y;
// }
saveInstance(chartInstance) {
this.chart = chartInstance;
// console.log(chartInstance);
}
public ngOnInit () {
this.dataSubscription = this.appService.getData().subscribe((data) => {
69 LINE - this.options.series[0].data = data.data.operating_rate;
// Code for the pie
let percentUp = data.data.operating_rate; // 88.14
let percentDown = 100 - percentUp; // 11.86
this.options.series[0].data = [
{
name: 'Up',
y: percentUp,
color: 'green'
},
{
name: 'Down',
y: percentDown,
color: 'white'
}
]
console.log(data);
});
}
public ngOnDestroy() {
if (this.dataSubscription) {
this.dataSubscription.unsubscribe();
}
}
}
下面是应用程序组件文件 app.Component.html
<chart [options]="options">
<series>
</series>
</chart>
app.Service.ts
import { Injectable } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {Observable} from 'rxjs';
import { timer } from 'rxjs/observable/timer';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/observable/timer';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/map';
import { Http } from '@angular/http';
import { map } from 'rxjs/operators';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/publishBehavior';
@Injectable({
providedIn: 'root'
})
@Injectable()
export class AppService {
data: any;
appService: Observable<AppService[]>;
constructor(public http: Http) { }
getData(){
/*const tick3 = Observable.timer(100, 60000);
this.appService = tick3.flatMap(() => http.get(usersURL)).map(res => [res.json()]).publishBehavior(<AppService[]>[]).refCount();*/
return this.http.get('https://my-json-server.typicode.com/techsithgit/json-faker-directory/profiles');
}
}
const usersURL = 'https://my-json-server.typicode.com/techsithgit/json-faker-directory/profiles';
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ChartModule } from 'angular-highcharts';
import * as highcharts from 'highcharts';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpModule,
ChartModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }
控制台错误
Uncaught Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'chart'. ("<!--The content below is only a placeholder and can be replaced.-->
<chart [ERROR ->][options]="options">
<series>
</series>
"): ng:///AppModule/AppComponent.html@1:7
'series' is not a known element:
1. If 'series' 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. ("--The content below is only a placeholder and can be replaced.-->
<chart [options]="options">
[ERROR ->]<series>
</series>
</chart>
"): ng:///AppModule/AppComponent.html@2:6
'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. ("<!--The content below is only a placeholder and can be replaced.-->
[ERROR ->]<chart [options]="options">
<series>
</series>
"): ng:///AppModule/AppComponent.html@1:0
at syntaxError (compiler.js:1016)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14813)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:23988)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:23975)
at compiler.js:23918
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23918)
at compiler.js:23828
at Object.then (compiler.js:1007)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23827)
答案 0 :(得分：1)
您已编码为AppService：
getData: any;
通过这种方式，您仅声明了一个变量。要调用getData函数，您应该在AppService中添加以下内容：
getData(): void {
// DO SOMETHING
}
答案 1 :(得分：0)
您是否尝试过将Inject指令添加到app.component.ts文件中？这是组件构造函数的代码：
constructor(@Inject(AppService) public appService: AppService)
app.component.ts文件更改：
export class AppComponent implements OnDestroy, OnInit {
title = 'my-project';
@Input() showMePartially: boolean;
options: any;
data: number;
chart: any;
dataSubscription: Subscription;
chartData$: Object;
constructor(@Inject(AppService) public appService: AppService) {
this.options = {
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
// legend: { enabled: false },
credits: {
enabled: false
},
tooltip: {
// pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false,
// format: '<b>{point.name}</b>: {point.percentage:.1f} %',
}
}
},
series: [{
name: 'Dispo',
data: []
}]
};
}
不要忘记导入适当的指令：
import { Component, Input, Inject, OnInit, OnDestroy } from '@angular/core';