我如何绑定 div id 以动态绑定 c3 js 图表到 angular2 中的 div

Question

我如何绑定 div id 以将 c3 js 图表动态绑定到 div。我已经使用了 attr.id 和 [id] 等，但是 none 它不起作用。请有人帮我解决这个问题。

@Component({
selector: 'chart-component',
template: <h1>{{chartId}}</h1>
 <div [id] = {{chartId}} class="c3"> </div>

})


export class ChartComponent implements OnInit
{

  constructor(){ }

  @Input('chartType') chartType:string;
  @Input('chartId') chartId:Object;
  @Input('chartData') chartData:any[];


  ngOnInit() {
    this.chartId = Object("chart1");
    let chart = c3.generate({
        bindto: '#'+this.chartId,   
        data: {
            json:this.chartData,
            type: this.chartType,
        },
        legend: {
              show: true
        }
  });

}
}

来自 html 调用下面提到的组件。

<chart-component chartType="bar" chartId="chart1" [chartData]="chartData">

我已经尝试将对象用作 div id，但仍然无法正常工作。

谢谢，

阿伦

Answer 1

不要同时使用 [] 和 {{}}。要么

[id]="chartId"

或另一个

id="{{chartId}}"

并且您需要使用 ngAfterViewInit 挂钩而不是 ngOnInit，因为您的 id 绑定尚未应用。

这里是Plunker Example

Answer 2

这就是 @Hostbinding 的目的。我会在它上面抛出一个属性指令，并在指令中使用类似的东西：

@HostBinding('attr.id') id = '#'+this.chartId;

我不确定您需要的逻辑，但大致是这样。

我如何绑定 div id 以动态绑定 c3 js 图表到 angular2 中的 div

How I can bind the div id for dynamically for binding c3 js chart into the div in angular2

c3.js

angular