ngx-charts-advanced-pie-chart不带属性或属性的渲染

问题描述

我一直在使用ngx-charts-advanced-pie-chart，但无法呈现整个标签。通过检查，我在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',{
      'name': 'Presentation','value': 2
    },{
      'name': 'Approve','value': 10
    },{
      'name': 'Not approve',{
      '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 { }

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

解决方法

我今天晚些时候发现了这个问题。我在Page-Component模块文件中导入的模块最初无法正常工作，但在渲染UI后不久便以某种方式加载。

因此，我尝试将模块导入到“父组件”模块中，它为我带来了魔力。

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

我将其导入到App.module.ts中，并且效果很好