ngx-charts：通過更新具有屬性綁定的dom元素來更改圖表

Question

我想更改ngx圖表，方法是將其從Dom更改並在屬性綁定中插入新圖表，但更改Dom由[innerHTML] = stringVar完成;但如果我的stringVar裏面是ngx-chart元素，它不會呈現它。

import { Component, OnInit } from '@angular/core'; 
import { NgxChartsModule } from '@swimlane/ngx-charts'; 

import { single, multi } from '../../shared/data'; 
import { CHARTS } from '../../shared/mock-charts'; 

@Component({ 
selector: 'app-chart-graph', 
template: '<div [innerHTML]="ChartGraph"></div>', 
styleUrls: ['./chart-graph.component.css'] 
}) 
export class ChartGraphComponent implements OnInit { 
ChartGraph = `<ngx-charts-bar-vertical 
    [view]="view" 
    [scheme]="colorScheme" 
    [results]="single" 
    [gradient]="gradient" 
    [xAxis]="showXAxis" 
    [yAxis]="showYAxis" 
    [legend]="showLegend" 
    [showXAxisLabel]="showXAxisLabel" 
    [showYAxisLabel]="showYAxisLabel" 
    [xAxisLabel]="xAxisLabel" 
    [yAxisLabel]="yAxisLabel" 
    (select)="onSelect($event)"> 
</ngx-charts-bar-vertical>`; 

single: any[]; 
multi: any[]; 
CHARTS: any[]; 

// options 
showXAxis = true; 
showYAxis = true; 
gradient = false; 
showLegend = true; 
showXAxisLabel = true; 
xAxisLabel = 'Country'; 
showYAxisLabel = true; 
yAxisLabel = 'Population'; 

colorScheme = { 
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] 
}; 

constructor() { 
Object.assign(this, { single, multi }); 
} 

onSelect(event) { 
    console.log(event); 
} 

ngOnInit() { 

} 

} 

Answer 1

It's not work with property binding just do like add that in template for good practice. 


    @Component({ 
     selector: 'app-chart-graph', 
     styleUrls: ['./chart-graph.component.css'], 
     template: '<ngx-charts-bar-vertical 
        [view]="view" 
        [scheme]="colorScheme" 
        [results]="single" 
        [gradient]="gradient" 
        [xAxis]="showXAxis" 
        [yAxis]="showYAxis" 
        [legend]="showLegend" 
        [showXAxisLabel]="showXAxisLabel" 
        [showYAxisLabel]="showYAxisLabel" 
        [xAxisLabel]="xAxisLabel" 
        [yAxisLabel]="yAxisLabel" 
        (select)="onSelect($event)"> 
       </ngx-charts-bar-vertical>' 
    }) 

    export class ChartGraphComponent implements OnInit { 
     single: any[]; 
     multi: any[]; 
     CHARTS: any[]; 

    // options 
    showXAxis = true; 
    showYAxis = true; 
    gradient = false; 
    showLegend = true; 
    showXAxisLabel = true; 
    xAxisLabel = 'Country'; 
    showYAxisLabel = true; 
    yAxisLabel = 'Population'; 

    //remaining code 
    } 

在你的模板

//you can also add @input() in graph component options pass them in like 
    <app-chart-graph [width]="" [height]="" [data]=""..></app-chart-graph> 
    </div>