【问题标题】:Error: Can't bind to 'ngForOf' since it isn't a known property of 'div' [closed]错误:无法绑定到“ngForOf”,因为它不是“div”的已知属性[关闭]
【发布时间】:2020-10-25 00:38:36
【问题描述】:

我正在尝试学习 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]

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

提前致谢。

【问题讨论】:

  • 你能展示你的 HTML 吗?造成此错误的人
  • 请不要截图
  • gallerylist有哪些数据?
  • 我从 api 获取数据并将其放入任何数组中。这是数据。 jsonplaceholder.typicode.com/photos
  • 你是在 ngOnInit() 中调用这个 api 吗?

标签: javascript angular typescript components router


【解决方案1】:

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

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

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

谢谢

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-04-02
    • 2021-03-20
    • 2021-01-06
    • 2021-10-24
    • 2019-10-09
    • 2020-06-17
    • 2016-06-02
    • 1970-01-01
    相关资源
    最近更新 更多