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

原因之一可能是：

您的module在CommonModule中没有imports[]
您使用 component 的 *ngFor 不属于任何 module。
您可能在 *ngFor 中有语法错误，即 **ngFor 或 *ngfor 等。
如果一切正常，则重新启动您的 IDE，即 VS Code、IntelliJ 等。

Answer 2

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

Answer 3

在BrowserModule中添加CommonModule和@NgModule

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

看看this link

Answer 4

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

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

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

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

4 个答案: