无法绑定到“ngForOf”，因为它不是“div”的已知属性

Question

将 ngFor 添加到 div 时，我收到以下警告，它似乎正在阻止我的 HTML 呈现。

我的应用程序中只有一个模块，并且 BrowserModule 被导入到导入中，这似乎解决了大多数人的问题，但它对我不起作用。

HTML：

<div *ngFor="let animal of animals" class="animal-row">
    <img />
    <div class="animal-info">
        <p class="animal-name"><i class="fad fa-monkey"></i> Alfie (Alifie-Moon)</p>
        <div class="row">
            <div id="species" class="col">
                <p id="species-text"><i class="fad fa-paw-claws"></i> <span>Skunk</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-paw"></i> <span>American</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-home-heart"></i> <span>01.01.01</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-watch-fitness"></i> <span>3 Years</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-hotel"></i> <span>1-A</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-smile"></i> <span>Good</span></p>
            </div>
        </div>
    </div>
</div>

app.module.ts:

// Angular & 3rd Part Imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastNotificationsModule } from 'ngx-toast-notifications';
import { RouterModule } from '@angular/router';
import { JwtModule } from '@auth0/angular-jwt';
// Providers
import { ErrorInterceptorProvider } from './_services/error.interceptor';
// Services
import { AuthService } from './_services/auth.service';
import { ModuleService } from './_services/module.service';
// Components
import { appRoutes } from './routes';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SubnavComponent } from './subnav/subnav.component';
import { CommonModule } from '@angular/common';

export function tokenGetter() {
   return localStorage.getItem('token');
}


@NgModule({
   declarations: [
      AppComponent,
      NavComponent,
      LoginComponent,
      DashboardComponent,
      SubnavComponent
   ],
   imports: [
      BrowserModule,
      CommonModule
      BrowserAnimationsModule,
      HttpClientModule,
      FormsModule,
      ToastNotificationsModule,
      RouterModule.forRoot(appRoutes),
      JwtModule.forRoot({
         config: {
            // tslint:disable-next-line: object-literal-shorthand
            tokenGetter: tokenGetter,
            whitelistedDomains: ['localhost:5000'],
            blacklistedRoutes: ['localhost:5000/api/auth']
         }
      })
   ],
   providers: [
      AuthService,
      ErrorInterceptorProvider,
      ModuleService
   ],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

我不知道这是否相关，但我确实有一个名为 module.ts 的文件（这是一个接口），我将其重命名为 navLinks，以防它产生冲突 - Angular 是否可能认为这是另一个模块？

Answer 1

可能有以下任何一种原因：

1. 您的module 在imports[] 中没有CommonModule
2. 您的component（您使用*ngFor 的位置）不是任何module 的一部分，即appModule 导入的CommonModule，因为*ngFor 和*ngIf 等已在CommonModule 中初始化。
3. *ngFor 中可能存在语法错误，即**ngFor 或*ngfor 等错字。
4. 如果一切正常，请重新启动您的 IDE，即 VS Code、IntelliJ 等。

Answer 2

原来的问题是我没有在 app.module.ts 中声明我正在处理的组件 - 一旦声明这解决了问题

Answer 3

在@NgModule 中添加BrowserModule 和CommonModule

@NgModule({
   import: [BrowserModule,CommonModule]
})

看看this link

Answer 4

每当我们打破我们的应用程序以具有模块的多级父子结构时，我们可能会遇到这个问题。在我的应用程序中，有一个名为 app.module.ts 的主应用程序模块以及我们无法全局访问此指令的其他子模块。

要解决这个问题，我们需要在应用程序的主模块（即 app.module.ts 文件）中导入 BrowserModule，并在子模块中导入 CommonModule。

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})