When adding an ngFor to a div I get the following warning and it appears to be stopping my HTML from rendering.

I tried *ngFor on <li>, <tr>, <th>, <span>, <ng-template> and got the same error message. It works elsewhere but not here.(I don't use it in <p-dialog> in other places)

If the problem is the missing module in app.component.ts, I couldn't find which one is 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,
    InputTextModule,
    InputTextareaModule,
    ButtonModule,
    CheckboxModule,
    DropdownModule,
    CalendarModule,
    ChipsModule,
    KeyFilterModule,
    InputSwitchModule,
    ListboxModule,
    InputMaskModule,
    RadioButtonModule,
    SpinnerModule,
    SelectButtonModule,
    ToggleButtonModule,
    PickListModule,
    TriStateCheckboxModule,
    TableModule,
    PickListModule,
    FieldsetModule,
    CheckboxModule,
    FieldsetModule,
    GalleriaModule,
    LightboxModule,
    ScrollPanelModule,
    PanelModule,
    SidebarModule,
    MatDialogModule,
    SidebarModule,
    DialogModule,
    DynamicDialogModule,
    DialogModule,
    NgbModule,
    ProgressSpinnerModule,
    ImageViewerModule,
    NgbModule,
    MultiSelectModule,
    MessagesModule,
    MessageModule,
    CurrencyMaskModule,
    FileUploadModule,
    ChartModule,
    ToastModule,
    EditorModule,
    TooltipModule,
    TabViewModule,
    ConfirmDialogModule,
    DragDropModule,
  ],
}

CodePudding user response：

looks like you misspelled the structural directive. it's *ngFor, not *ngfor