Рендеринг компонентов динамически

Question

Я пытаюсь сделать страницу Ioni c dynamici c, где будут отображаться два компонента. Например:

У меня есть JSON:

[
    {
       book_code: 237
       description: "Lorem ipsum dolor sit amet...."
       id: 4
       name: "Book 4"
       page_id: 1
       price: 404
       read_status: "Complete"
    },
    {
       description: "This is a description."
       id: 0
       name: "Movie 0"
       page_id: 2
    }
 ]

Где page_id - это параметр для загрузки компонента.

В моем классе TS I ' я делаю это:

  loadComponents(){
    for(let i = 0; i < this.items.length; i++){
      this.componentsToLoad.push(this.getComponent(this.items[i]));
    }
    console.log(this.componentsToLoad);
  }

  getComponent(item: any){
    let klass = this.avaliableComponents[item['page_id']];
    let instance = new klass()
    instance.draw(item);
    return klass; // If I return 'instance', i get 'No component factory found for [object Object]' error.
  }

Метод draw делает это:

draw(data: any) {
    this.movie.id = data['id'];
    this.movie.name = data['name'];
    this.movie.pageId = data['page_id'];
    this.movie.description = data['description'];
}

PS: для каждого класса (Mov ie и Book) есть специфика c реализация.

На моей странице компоненты отображаются правильно, но значения не верны, значения пустые.

Я пытаюсь console.log метод draw, и я увидел, что значения установлены правильно.

Я рендеринг компонентов, как это:

<div *ngFor="let component of componentsToLoad" style="background-color: white;">
    <ng-container *ngComponentOutlet="component"></ng-container>
</div>