График в другом модуле - PullRequest
Новая
       18

График в другом модуле

0 голосов
/ 06 мая 2020

Я пытаюсь создать график c в своей программе, когда я помещаю те же коды в «app.module», «app.component.ts» и «app.component. html», он работает обычно, но когда я использую его в другом модуле и компоненте, он не работает и возвращает ошибку, а когда я их вынимаю, компонент работает нормально. И если я использую компонент в "app.module", он работает нормально.

Модуль 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SalesComponent } from './sales.component';
import { GenericModule } from '../generic.module';
import { ChartModule } from 'primeng/chart';

@NgModule({
  declarations: [SalesComponent],
  imports: [
    CommonModule,
    GenericModule,
    ChartModule
  ]
})
export class SalesModule { }

HTML

<p>sales works!</p>
<p-chart type="pie" [data]="data"></p-chart>

.TS 

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

@Component({
  selector: 'sales',
  templateUrl: './sales.component.html',
  styleUrls: ['./sales.component.scss']
})
export class SalesComponent implements OnInit {

  data = {
    labels: ['A','B','C'],
    datasets: [{
        data: [300, 50, 100],
        backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ],
        hoverBackgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ]
    }]    
  };

  constructor() { }

  ngOnInit(): void {

  }

}

ОШИБКА: 


src/app/components/sales/sales.component.html:2:1 - error NG8001: 'p-chart' is not a known element:
1. If 'p-chart' is an Angular component, then verify that it is part of this module.
2. If 'p-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2 <p-chart type="pie" [data]="data"></p-chart>
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/components/sales/sales.component.ts:5:16
    5   templateUrl: './sales.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SalesComponent.
src/app/components/sales/sales.component.html:2:21 - error NG8002: Can't bind to 'data' since it isn't a known property of 'p-chart'.
1. If 'p-chart' is an Angular component and it has 'data' input, then verify that it is part of this module.
2. If 'p-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

2 <p-chart type="pie" [data]="data"></p-chart>
                      ~~~~~~~~~~~~~

  src/app/components/sales/sales.component.ts:5:16
    5   templateUrl: './sales.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SalesComponent.

1 Ответ

0 голосов
/ 06 мая 2020

Вам необходимо добавить p-chart в объявлениях: [] в app.module.ts , чтобы вы могли получить к нему доступ в других компонентах. 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';    
import { SalesComponent } from './sales.component';
import { GenericModule } from '../generic.module';
import { ChartModule } from 'primeng/chart';
import { PChartComponent} from './pchart.component';


@NgModule({
  declarations: [SalesComponent, PChartComponent],
  imports: [
    CommonModule,
    GenericModule,
    ChartModule
  ]
})
export class SalesModule { }
...