Как добавить детей в div в Angular 7

Question

Я пытаюсь добавить дочерний элемент в div, определенный в html в Angular 7, но появляется следующее сообщение об ошибке:

Cannot read property 'appendChild' of null

Этот код вызывает проблему

export class ProductComponent{
constructor(){ 
this.init
}
init(){
    //private container : any = document.createElement('div');
    this.container.className = 'shirt_Model_Div';
            const modelDiv = document.getElementById('shirtModelDiv');
            modelDiv.appendChild(this.container); //error occurs here
            this.renderer.setSize($(modelDiv).width(), $(modelDiv).height(), $(modelDiv).maxHeight);
}
  }

мой HTML:

<h1>3d Model Basic</h1>
<div id="shirtModelDiv" style="width: calc(100%);"></div>

Возможно, я определил код в неправильном месте?Я не знаком с жизненным циклом угловых компонентов

Answer 1

Ваш код вызывается в конструкторе компонента - перед созданием представления.Вам нужно вызвать его в ngAfterViewInit() или позже

Так что вы можете сделать это как

ngAfterViewInit() {
    this.container.className = 'shirt_Model_Div';
    const modelDiv = document.getElementById('shirtModelDiv');
    modelDiv.appendChild(this.container); //error occurs here
    this.renderer.setSize($(modelDiv).width(), $(modelDiv).height(), $(modelDiv).maxHeight);
}

И вам нужно реализовать AfterViewInit для компонента

export class AnyComponent implements AfterViewInit {
...
}