ngx图表高级饼图不带属性渲染

Question

我一直在使用ngx charts高级饼图，但它并没有呈现整个标记。通过检查，我在DOM中只能看到<ngx-charts-advanced-pie-chart></ngx-charts-advanced-pie-chart>——DOM中缺少所有属性。

page.html

<div class="card-body widget-body">
<div style="width:1000px;height:300px;">
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="localDataArrayIdea"
[gradient]="gradient">
</ngx-charts-advanced-pie-chart>
</div>
</div>

page.component.ts

import { PageService } from './page.service';
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
@Component({
selector: 'app-page',
templateUrl: './page.component.html',
styleUrls: ['./page.component.scss']
})
export class DashboardComponent implements OnInit {
public localDataArrayIdea;
public dataArrayIdea: any[] = [
{
'name': 'Submitted',
'value': 1
},
{
'name': 'Review',
'value': 1
},
{
'name': 'Presentation',
'value': 2
},
{
'name': 'Approve',
'value': 10
},
{
'name': 'Not approve',
'value': 1
},
{
'name': 'Open',
'value': 1
}
];
view: any[] = [700, 400];
gradient = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA', '#CAAAAA', '#7AAAAA']
};
constructor(public countService: PageService) {
this.getCountsIdea();
console.log('Dashboard Constructed');
}
public ngOnInit() { }
getCountsIdea() {
this.countService.getCountsIdea((data) => {
this.dataArrayIdea[0].value = data.submittedCount;
this.dataArrayIdea[1].value = data.reviewCount;
this.dataArrayIdea[2].value = data.presentationCount;
this.dataArrayIdea[3].value = data.approvedCount;
this.dataArrayIdea[4].value = data.notApprovedCount;
this.dataArrayIdea[5].value = data.openCount;
const localDataArrayIdea = this.dataArrayIdea;
Object.assign(this, { localDataArrayIdea });
console.log('localDataArrayIdea ', localDataArrayIdea);
}, (err) => {    });
}
}

page.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { PageComponent } from './page.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
CommonModule,
NgxChartsModule,
BrowserAnimationsModule
],
declarations: [
PageComponent
],
})
export class PageModule { }

这应该已经在DOM for UI中呈现了所需的属性，但我看到的只是一个空标记。有人能帮忙解决问题吗

Answer 1

我今天晚些时候发现了这个问题。我在页面组件模块文件中导入的模块最初不起作用，但过了一段时间UI呈现后，它以某种方式加载了。

所以我试图在父组件模块中导入模块，它为我带来了魔力

import { NgxChartsModule } from '@swimlane/ngx-charts';
@NgModule({
imports: [
CommonModule,
NgxChartsModule,
BrowserAnimationsModule
]
})

我在App.module.ts中导入了这个，它完美地完成了