#angular #typescript #angular9
#angular #typescript #angular9
Вопрос:
Я пытаюсь создать страницу с карточкой-сеткой панели инструментов, используя 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);
}
Комментарии:
1. Вы можете использовать библиотеку ng-dynamic-component .