Question

我正在尝试制作一个离子动态页面，该页面将被呈现为两个部分。例如：

我有这个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课上，我正在这样做：

  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：对于每个班级（电影和图书），都有特定的实现方式。

在我的页面中，组件渲染正确，但是值不正确，值是空白。

我尝试console.log方法draw，发现值设置正确。

我正在渲染这样的组件：

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

动态渲染组件

0 个答案: