Передача объекта в динамически создаваемый дочерний компонент, вызывающий ошибку синтаксического анализа html - PullRequest
Новая
       22

Передача объекта в динамически создаваемый дочерний компонент, вызывающий ошибку синтаксического анализа html

0 голосов
/ 26 марта 2019

Я пытаюсь создать динамический матричный макет. Скажем, например: разделите div на макет 2X2 и внутри каждой ячейки в макете 2X2 снова разделите на другой макет 2X2 на основе конфигураций. то есть.

Например: макет листа 2X2 и макет списка 2X2 означают

  • мозаичный контейнер содержит 4 компонента image-stack-list
  • в каждом компоненте image-stack-list будет 4 Компонент просмотра стека изображений.

У меня есть данные модели, привязанные к компоненту для создания динамических макетов.

Исходный контейнер - tile-div-component.html 

<div class="tile-container">
  <ng-container *ngFor="let stackListItem of viewerConfigService.viewerModel.stackLists; let i=index;">
    <div id="tile_div_{{stackListItem.rowId}}_{{stackListItem.colId}}" class="subtree" *ngIf="stackListItem.show">
      <image-stack-list #stackList [parentId]="i + 1" [parent]="this" [listModel]="stackListItem">
      </image-stack-list>
    </div>
  </ng-container>
</div>

А теперь в компоненте image-stack-list я хотел бы динамически создавать макет на основе входных данных родительского компонента. Здесь я не могу получить значения в {{listModel.viewers}}. Я считаю, что listModel кажется нулевым или неопределенным, поскольку я получаю ошибки HTML-парсера. во время рендеринга image-stack-list.component. Любая идея о том, как решить эту проблему.

изображение стек-list.component.html 

<div class="stack-container">
  <ng-container *ngFor="let viewer of {{listModel.viewers}}; let i=index;">
    <div id="stackdiv_{{parentId}}.{{viewer.row}}X{{viewer.col}}" class="subtree" 
      *ngIf="viewer.show">
      <image-stack-viewer #stackViewer >
	</image-stack-viewer>
    </div>
  </ng-container>
</div>

Соответствующий код из модели выглядит следующим образом 

export class TileViewerModel
{
    public stackLists:Array<StackListModel> = [];

    constructor(viewerConfigService:ViewerService)
    {
        let maxRowCount = viewerConfigService.maxRow_TileLayout;
        let maxColCount = viewerConfigService.maxCol_TileLayout;
        for(var i=0;i<maxRowCount;i++)
        {
            for(var j=0;j<maxColCount;j++)
            {
                let stackListMdl:StackListModel = new StackListModel(i+1,j+1,viewerConfigService.maxRow_ListLayout,viewerConfigService.maxCol_ListLayout);
                this.stackLists.push(stackListMdl);
            }
        }
    }
}

export class StackListModel
{
    public rowId:number;
    public colId:number;
    public show:boolean;

    public stackViewers:Array<StackViewerModel> = [];

    constructor(row:number,col:number, 
        maxListRowCount:number,maxListColCount:number)
    {
        this.rowId = row;
        this.colId = col;
        this.show = true;

        let maxRowCount = maxListRowCount;
        let maxColCount = maxListColCount;
        for(var i=0;i<maxRowCount;i++)
        {
            for(var j=0;j<maxColCount;j++)
            {
                let stackViewerMdl:StackViewerModel = new StackViewerModel(this,i+1,j+1);
                this.stackViewers.push(stackViewerMdl);
            }
        }
    }
}

export class StackViewerModel
{
    public rowId:number;
    public colId:number;
    public show:boolean;

    constructor(stackListModel:StackListModel,row:number,col:number)
    {
        this.rowId = row;
        this.colId = col;
        this.show=true;
    }
}

И, наконец, код, который создает TileViewerModel, находится в службе ViewerConfig 

@Injectable({
  providedIn: 'root'
})
export class ViewerConfigService
{
    public viewerModel:TileViewerModel;

    public maxRow_TileLayout = 2;
    public maxCol_TileLayout = 2;
    public maxRow_ListLayout = 2;
    public maxCol_ListLayout = 2;
    constructor()
    {
        this.viewerModel = new TileViewerModel(this);
    }
}
...