Question

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

@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，但仍无效。

谢谢，

s Arun s

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

2 个答案: