Question

我正在尝试学习有角度的知识。但是我遇到了一些问题。

在其中，我正在使用延迟加载模块库。我创建一个管理模块，并在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]

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

谢谢。

Answer 1

检查所有内容后，一切正常。无需检查angular.json文件。

也许您添加了任何通过脚本创建任何元素的jquery脚本。

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

谢谢

错误：由于它不是'div'的已知属性，因此无法绑定到'ngForOf'

1 个答案: