错误：'error TS2339：“响应”类型上不存在属性“数据”。- Angular

Question

我是学习 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)

Answer 1

正如您在 AppService 中编写的代码：

getData: any;

通过这种方式，您只是声明了一个变量。要调用 getData 函数，您应该在 AppService 中添加类似这样的内容：

getData(): void {
   // DO SOMETHING
}

Answer 2

您是否尝试将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';