Angular 4：PrimeNg DoughnutChart动态数据问题。

Question

我最近一直在处理primeng图表，我正在使用PrimeNG提供的DoughnutChart。我想将存储在变量中的数值作为此图表的ts文件中的数据传递，但它不会在UI中显示任何内容，其中数据是静态的，它的工作方式非常正常。这是相同的代码：

1.）工作一： -

this.invoicedata = {
            labels: ['InvoiceQty', 'TotalQty'],
            datasets: [
                {
                    data: [50, 50],
                    backgroundColor: [
                        "#ff9800",
                        "#ffffff",

                    ],
                    hoverBackgroundColor: [
                        "#ff9800",
                        "#ffffff",

                    ]
                }]
        }

2.）非工作人员： -

  this.invoicedata = {
                labels: ['InvoiceQty', 'TotalQty'],
                datasets: [
                    {
                        data: [this.pICompletionPercentage, this.PIPendingpercent],
                        backgroundColor: [
                            "#ff9800",
                            "#ffffff",

                        ],
                        hoverBackgroundColor: [
                            "#ff9800",
                            "#ffffff",

                        ]
                    }]
            }

这是相同的HTML： -

 <div class="row">
                                <p-chart type="doughnut" [data]="invoicedata" width="150px"></p-chart>
                                <p class="text-center">Invoiced- {{pICompletionPercentage}}%</p>
                            </div>

Answer 1

问题可能是您在服务呼叫结束前设置了invoiceData。因为，您将不得不等待一段时间来填充invoiceData，您可能还想延迟primeng图表初始化。你可以用*ngIf实现这一目标。

所以，你可以做这样的事情

Your.component.ts

 @Component({
     selector: 'your-comp',
     template: `
         <p-chart *ngIf="invoiceData" type="doughnut" [data]="invoiceData">
         </p-chart>
     `
 })
 export class YourComponent implements OnInit {
     invoiceData;

     constructor(private someService: SomeService) {}

     ngOnInit() {
         this.getData();
     }

     getData() {
         this.someService
             .getData()
             .subscribe(resp => {
                 // here you can set your data the way you want.
                 this.invoiceData = resp;
             })
     }

 }