Блог

Я пытаюсь создать страницу с карточкой-сеткой панели инструментов, используя angular2gridster с различными компонентами в качестве содержимого каждой карты. Карты создаются с использованием ngFor для массива объектов, указывающих данные о карте, включая свойство, содержащее компонент (как показано ниже). Каким-то образом появляется ошибка, связанная с тем, что ViewContainerRef не определен, несмотря на то, что было бы нормально, если бы я переместил шаблон из области ngFor.

 {
      component: CashflowOverviewComponent,
      title: 'example title',
      visible: true,
      metadata: {
        //XY coordinate in grid
        x: 0,
        y: 0,
        //Width and height
        w: 2,
        h: 1,
      },
    },
  

В моем HTML я попытался сгенерировать код с помощью ngFor

 <div *ngFor="let widget of widgets">
        <ngx-gridster-item *ngIf="widget.visible" class="grid_card" [(x)]="widget['metadata'].x "
            [(y)]="widget['metadata'].y" [(w)]="widget['metadata'].w" [(h)]="widget['metadata'].h">
            <div class="card">
                <div class="card_header">
                    <div *ngIf="dragEnabled" class="material-icons card_drag handler_icon drag_icon">drag_indicator
                    </div>
                    <div class="card_title">Card title</div>
                </div>
                <ng-template #cardContent></ng-template>
                {{dynamicComponentGenerator(widget.component)}}
                <div class="card_content">
                </div>
            </div>
        </ngx-gridster-item>
    </div>
  

Приведенный ниже код показывает, как я пытаюсь инициализировать

  @ViewChild("cardContent",{static:true , read: ViewContainerRef}) cardContent: ViewContainerRef;QueryList<ViewContainerRef>;
  

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

 dynamicComponentGenerator  = (component)=>{
    let factory = this.r.resolveComponentFactory(component);
    this.cardContent.clear();
    let compRef = this.cardContent.createComponent(factory);
  }