Error: Can't bind to 'ngForOf' since it isn't a known property of 'div'

Error: Can't bind to 'ngForOf' since it isn't a known property of 'div'

我正在努力学习 angular。但是我遇到了一些问题。

其中,我使用的是延迟加载模块库。我创建了一个管理模块并在 app.module 中调用它。我还在 admin.module.ts 中添加了 commonModule,在 app.ts 中添加了 BrowserModule。

在添加数组时,我遇到了问题。

Can't bind to 'ngForOf' since it isn't a known property of 'div'.

这里是error

的截图

[![在此处输入图片描述][1]][1]

这里是admin.module

  import { NgModule } from '@angular/core'; 
import { CommonModule } from "@angular/common";
import { HttpClientModule } from '@angular/common/http';
import { AdminRoutingModule } from './admin-routing.module';

import { AdminComponent } from './admin.component'; 
import { AdminHeaderComponent } from '../shared/admin-header/admin-header.component';
import {AdminSidebarComponent } from '../shared/admin-sidebar/admin-sidebar.component';

import {galleryService} from '../services/gallery.service';

@NgModule({
    imports: [
      CommonModule,
      AdminRoutingModule,
        HttpClientModule
    ],
    declarations: [ 
      AdminComponent, 
      AdminHeaderComponent,
      AdminSidebarComponent
    ],
  
     providers: [
       galleryService
    ]
})
export class AdminModule { }



App.ts

import { BrowserModule } from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import { NgModule } from '@angular/core';

import {AdminModule} from './admin/admin.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/header/header.component';
import { LoginComponent } from './general/login/login.component';
import { RegisterComponent } from './general/register/register.component';
import { AdminComponent } from './admin/admin.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

import { AuthGuard } from'./general/auth.guard'
import { SecurityService } from './services/security.service';
import { ErrorService } from './services/error.service';

import { ReactiveFormsModule } from '@angular/forms';

import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';
import {JwtInterceptor, ErrorInterceptor} from './_helper';

// used to create fake backend
import { fakeBackendProvider } from './_helper';
import { CardComponent } from './shared/card/card.component'; 


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    LoginComponent,
    RegisterComponent,
    CardComponent 
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
      AdminModule,
      ReactiveFormsModule,
      HttpClientModule,
      BrowserAnimationsModule, // required animations module
      ToastrModule.forRoot() // ToastrModule added
  ],
  providers: [AuthGuard, SecurityService, fakeBackendProvider,
      {
          provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true
      },
      {
          provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true
      }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里是HTML

<div class="container-fluid">
          <div class="row">
            
            <div class="col-md-4" *ngFor="let item of gallerylist">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title card-header-primary">Simple Table</h4>
                  <p class="card-category"> Here is a subtitle for this table</p>
                </div>
                <div class="card-body">
                   
                </div>
              </div>
            </div>
             
          </div>
        </div>

list.component.ts


getGallery(){
    this.gallery.getAllGallery().subscribe((data: any) => {
        this.gallerylist = data;
        console.log(this.gallerylist);
    })
  }

[![在此处输入图片描述][5]][5]

我也研究了以前的文章,但没有得到解决方案。请帮助我。

提前致谢。

检查一切后一切正常。比你必须检查 angular.json 文件。

可能是您添加了任何 jquery 脚本,通过脚本创建任何元素。

我通过从 angular.json 中删除不需要的脚本来修复它。

谢谢