어떻게 내가 div2에 ID를 바인딩 할 수 있습니다 동적으로 C3을 js 차트에있는 div에 angular2

Question

div에 바인딩하는 방법에 대한 div id를 동적으로 바인딩 할 수 있습니다. 나는 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 
     } 
    }); 

} 
} 

(아래의 구성 요소 참조).

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

div ID로 개체를 사용하려고했지만 여전히 작동하지 않습니다.

감사합니다,

아룬의

Answer 1

함께 [] 및 {{}}를 사용하지 마십시오. 어느 하나의

[id]="chartId" 

또는

id="{{chartId}}" 

다른

그리고 당신은 당신의 id이 아직 적용되지 않은 바인딩 때문에 ngAfterViewInit 후크 대신 ngOnInit을 사용해야합니다.

여기 Plunker Example

Answer 2

이 (가) @Hostbinding의 목적이다입니다.

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

난 당신이 필요합니다 논리의 특정 아니지만,이 라인을 따라 뭔가 : 나는 그것과 같은 지시문을 사용 뭔가 내 속성 지시어를 던질 것입니다.