Encountering an issue with adding an ngFor directive on a div, which is causing a warning and preventing my HTML from rendering properly.
I experimented with using *ngFor on various elements like <li>, <tr>, and <span>, but kept getting the same error message. It works fine in other sections of my code but not here (I have not used it within <p-dialog> elsewhere).
If the problem lies with a missing module in app.component.ts, I'm having trouble identifying which one is actually missing.
my-page.component.html
<p-dialog [(visible)]="displayPopup"
[style]="{minWidth: '716px', minHeight: '270px', height:'50%'}"
[baseZIndex]="10000"
[modal]="true"
[responsive]="true"
[maximizable]="true">
<p-header>
<div *ngfor="let model of models">
{{model.name}} Update
</div>
</p-header>
<div style="min-height:335px!important">
<app-newComponent #newComp
[data1]="data1"
[data2]="data2"
(onChange)="onModelditChange($event)"></app-newComponent >
</div>
<p-footer>
<button type="button" pButton icon="pi pi-times" (click)="updateModel()" label="Save"></button>
</p-footer>
</p-dialog>
app.module.ts
@NgModule({
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
ReactiveFormsModule,
HttpClientModule,
CommonModule,
AuthModule.forRoot(),
FormsModule,
routing,
AccordionModule,
BrowserAnimationsModule,
TreeTableModule,
... (list of imported modules has been shortened for brevity)
],
}