ngx-charts-advanced-pie-chart 渲染没有属性或属性

Question

我一直在使用 ngx-charts-advanced-pie-chart 但它没有呈现整个标签。 我通过检查在 DOM 中可以看到的是<ngx-charts-advanced-pie-chart></ngx-charts-advanced-pie-chart> DOM 中缺少所有属性。

页面.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 中为 UI 呈现所需的属性，但我看到的只是一个空标签。 有人可以帮忙解决这个问题吗

Answer 1

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

所以我尝试在父组件模块中导入模块，它为我做了魔术。

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

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