각도 2 입력 요소가 요소에 바인딩되지 않음

입력 요소로 elementId를 가져 오는 Angular 2 구성 요소가 있는데 div의 id 특성으로 설정합니다. 어떤 이유로 div의 ID가 설정되지 않습니다. 각도 2 입력 요소가 요소에 바인딩되지 않음

@Component({ 
    selector: 'my-chart', 
    template: ` 
     <div> 
      Hello {{elementId}} 
      <div [id]="elementId"></div> 
     </div> 
    ` 
}) 

export class MyChartComponent implements OnInit, OnChanges { 
    @Input() elementId: string; 

    ngOnInit() { 
     this.createChart(); 
    } 

    createChart() { 
     console.log("ID: ", this.elementId); 
     ... 
    } 
}

이

는 부모 구성 요소의 모습입니다 :

<div *ngFor="let chart of charts"> 
    <my-chart [elementId]="chart.id"></my-chart> 
</div>

내가 사업부에 요소를 검사 할 때

, 그것은 id 속성이 설정되지 않았 음을 보여줍니다 HTML 요소. 또한 Hello {{elementId}}는 "Hello"만을 보여줍니다. 입력 된 요소는 없습니다. 아래 사진을 참조하십시오.

그러나 console.log 문은 입력 바인딩이 올바른지 나타내는 id를 올바르게 출력합니다.

이미지 : Inspect Element shows id is missing

출처

2017-09-22 florentine

을 사용해야하는 것입니다.

외부 dom monuplation을 AfterViewInit 방법으로 작성해야합니다.

export class MyChartComponent implements OnInit, OnChanges, AfterViewInit { 
    @Input() elementId: string; 

    ngOnInit() { 

    } 

    ngAfterViewInit(): void { 
     console.log("ID: ", this.elementId); 
     Plotly.newPlot(this.elementId, ...); 
    } 
}

출처

2017-09-22 20:23:51

귀하의 답변을 주셔서 감사하지만 이것은 또한 작동하지 않았다. 나는 문제가 전화의 타이밍과 관련이 없다고 생각한다. 문제는 div의 ID가 설정되지 않는다는 것입니다. 더 이상 기다리지 않고 ID는 설정되지 않습니다. ngOnInit()의 console.log는 this.elementId **가 ** 존재하고 올바르게 바인딩되었음을 보여줍니다. – florentine

흠, 그게 내가 가진거야. 우리가 더 많은 답변을 얻을 수 있는지 보자 –

안녕, 아니 루다, 나는 질문을 좀 더 명확하게 편집했습니다! 감사합니다 – florentine

이 각도에서 document.getElementById();에 대한 동등한이며, 당신이 사용할 수 있습니다.

여러분은 jQuery에서 사용했던 방식으로 angular 및 querySelector에서 요소 참조 (ElementRef)를 사용할 수 있습니다. 장소 모든 HTML과 JS 일이 바인딩 곳

constructor(private elementRef: ElementRef) { 
    } 

    // this is inside any of the method 
    // this is to select multiple 
    this.elementRef.nativeElement.querySelectorAll('.mandate'); 

    // this is to select single 
    this.elementRef.nativeElement.querySelector('.mandate')

그래서 오히려 문서를 사용하여, 당신은 각 라이프 사이클 AfterViewInit에서 ElementRef

출처

2017-09-22 20:12:16

내가 사용중인 라이브러리는 document.getElementById를 사용하므로 아무 문제가 없습니다. 그래서 div의 id 속성이 올바르게 설정되어 있는지 확인해야합니다. 더 명확하게하기 위해 제 질문을 수정했습니다. – florentine

다른 대답을 추가했습니다 –

각도 2 입력 요소가 요소에 바인딩되지 않음

답변

관련 문제