无法绑定到'ngForOf'，因为它不是'tr'的已知属性（最终版本）

Question

我正在使用Angular2 Final版本（2.1.0）。当我想显示公司列表时，我收到了这个错误。

file.component.ts中的

：

public companies: any[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

file.component.html中的

：

<tbody>
  <tr *ngFor="let item of companies; let i =index">
     <td>{{i}}</td>
     <td>{{item.name}}</td>
  </tr>
</tbody>

Answer 1

如果BrowserModule是根模块imports: []，则@NgModule()中的AppModule添加CommonModule，否则import {BrowserModule, CommonModule} from '@angular/common'; .. .. @NgModule({ imports: [BrowserModule, /* or CommonModule */], .. }) 。

ArticlesController

def index 
  @articles = Article.all.paginate(page: params[:page], per_page: 16)
end

Answer 2

就我而言，问题是我的队友在模板中提到*ngfor而不是*ngFor。很奇怪，没有正确的错误来处理这个问题（在Angular 4中）。

Answer 3

您必须在使用这些内置指令（如ngFor，ngIf等）的组件中导入“CommonModule”。

import { CommonModule } from "@angular/common";


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Answer 4

对我来说，问题是我没有在randrange(a, b+1)中导入定制模块HouseModule。我还有其他进口。

文件：app.module.ts

app.module.ts

Answer 5

如果未在要素模块中声明路线组件，也会发生这种情况。例如：

feature.routing.module.ts：

...
    {
        path: '',
        component: ViewComponent,
    }
...

feature.module.ts：

     imports: [ FeatureRoutingModule ],
     declarations: [],

请注意，在声明数组中，ViewComponent是 not ，而不是。

Answer 6

如果您要制作自己的模块，请在您自己的模块中的导入中添加CommonModule

Answer 7

未来的读者

检查以下各项：

1. 该组件在 SINGLE 角模块中声明
2. 确保您拥有import { CommonModule } from '@angular/common';
3. 重新启动IDE /编辑器
4. 重新启动开发服务器（ng serve）

Answer 8

要记住的事情：

使用自定义模块（AppModule以外的模块）时，有必要在其中导入通用模块。

selectedFilters ["Product Rating": ["5", "4", "3", "2", "1"], "Price": ["$00.00 - $200.00", "$200.00 - $400.00", "$600.00 - $800.00", "$800.00 - $1000.00", "$1000.00 AND OVER"]]

Answer 9

我收到错误消息，因为我正在使用的组件未在模块的声明：[]部分中注册。

添加组件后，错误消失了。我本来希望比此错误消息更晦涩难懂的东西能够指示出真正的问题。

Answer 10

以防万一有人在尝试导入CommonModule之后仍然遇到错误，请尝试重新启动服务器。它出奇地工作

Answer 11

对于Angular 10：

1. 将BrowserModule添加到路由模块的导入中。
2. 确保已将无法正常工作的组件添加到应用程序模块声明中。

不执行步骤2将触发此错误！

请务必重新开始投放！！！

Answer 12

我有同样的错误，但是我有导入了CommonModule。取而代之的是，我在分割模块时留了一个逗号，这不应该是因为复制/粘贴：

@NgModule({
    declarations: [
        ShopComponent,
        ShoppingEditComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            { path: 'shop', component: ShopComponent }, <--- offensive comma
        ])
    ]
})

Answer 13

如果一切正常，请重新启动应用

我不得不面对这个错误，但是怎么办？我删除了一个模块，同时也从父模块中删除了它的引用，因此此错误开始进入我的浏览器，但在编辑器中一切正常，即VS Code，因此我重新启动我的应用程序固定。

如果您通过验证此页面上提供的其他答案认为一切都很好，请尝试重新启动该应用。

Answer 14

对我来说，解决问题的是对我的项目进行 git clone 并运行（像往常一样）：

npm install

Answer 15

我遇到了同样的问题，即使我在“module.ts”中导入了“BrowserModule”和“CommonModule”，但它没有不工作，我的错误是，没有添加“NgModule.declarations”我的组件。

@NgModule ({
   declarations: [
     Your_Component // here
   ]
}) 

Answer 16

将组件添加到您的 app.module

import { ModalComponent } from './modal/modal.component';

@NgModule({
  declarations: [ModalComponent],
  entryComponents: [ModalComponent],
  
  }),
  providers: [
  ],
  bootstrap: [AppComponent]
})

Answer 17

我遇到了一个问题，因为 json 数据中有空格。

Answer 18

自定义模块需要通用模块

从“ @ angular / common”导入{CommonModule};

@NgModule（{   进口：[     通用模块   ] }）

Answer 19

app.module.ts已修复，更改为：在应用模块中导入 BrowserModule

import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule, 
  ],     
  providers: [],
  bootstrap: [AppComponent]
})

Answer 20

当 $ psql postgresql://user:password@127.0.0.1:5432/database 语法编写不正确时，也可能引发此错误，在我的情况下，我有：

ngFor

它通过使用以下语法得到修复：

<ng-template *ngForOf="let key of SomeObject; index as i">

Answer 21

就我而言，问题是我在 const 中使用了 let 而不是 *ngFor。

Answer 22

使用“ app-routing.module”时，我们忘记导入“ CommonModule”。记住要导入！

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

Answer 23

如果你已经使用了 (BrowserModule, CommonModule, FormsModule) 它仍然无法正常工作

那么你要做的就是检查有错误的组件是否在模块中声明

Answer 24

通过将CommonModule导入其他（新的/自定义的）模块中，似乎可以收敛很多答案。
仅在所有情况下，此步骤是不够的。

完整的解决方案包括两个步骤：

1. 使伪指令NgIf，NgFor等对您的项目可见。
2. 以正确的方式在主要组件（app.module.ts）中重新组装所有内容

第1点
主模块中的BrowserModule似乎足以访问NgFor。 Angular Documentation站在这里：。

CommonModule导出所有基本的Angular指令和管道，例如NgIf，NgForOf，DecimalPipe等。通过BrowserModule重新导出，

另请参见此处的答案：CommonModule vs BrowserModule in angular

第2点
（在我的情况下）仅需要进行以下更改：

1. 导入模块OtherModule
2. 导入组件OtherComponent
3. ng构建（重要！）
4. ng服务

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        OtherModule
    ],
    declarations: [OtherComponent, AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

other.html

<div *ngFor='let o of others;'> 
</div>

other.component.ts

@Component({
    selector: 'other-component',
    templateUrl: './other.html'
})
export class OtherComponent {
}

app.module.ts

@NgModule({
    imports: [],
    providers: []
})
export class OtherModule{
}

Answer 25

所以请确保

1. 指令中没有语法错误

2. 浏览器（在App模块中）和通用（在其他/子模块中）模块已导入（与上述Günter Zöchbauer相同）

3. 如果您已在应用程序中进行路由，则应将路由模块导入到App Module中

4. 所有路由组件的模块也都导入到App Module中，例如： app-routing.module.ts如下：

   const路线：路线= [

   {路径：”，组件：CustomerComponent}，

   {路径：“ admin”，组件：AdminComponent}

   ];

然后，App模块必须在@NgModule（）中导入CustomerComponent和AdminComponent的模块。

Answer 26

即使我的所有导入都正常并且呈现组件时没有任何其他错误，我也遇到了类似的错误（*ngIf）。

在我的情况下，AppModule不包括该特定模块。奇怪的是，它没有对此抱怨，但是这可能与Ivy与ng serve的工作方式有关（根据路由选择加载模块的种类，但是不考虑其依赖性）。

Answer 27

我因为**而有问题*

 item.fieldGroup['Import'].formControl.setValue(333.33)

Answer 28

我在Angular8基础实时项目上启动时遇到了上述问题，但是当使用“ app-routing.module”时，我们忘记了导入“ CommonModule”。记住要导入！

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
]})

它将解决您的错误。

Answer 29

我遇到了同样的错误， 您可以通过以下一种方法解决此问题：

1. 如果没有任何嵌套模块

   a。将 CommonModule 导入您的 App模块

   b。将组件导入到要在应用模块中添加 * ngFor 的位置，在声明

中定义

// file App.modules.ts
@NgModule({
  declarations: [
    LoginComponent // declarations of your component
  ],
  imports: [
    BrowserModule
    DemoMaterialModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    ApiService, 
    CookieService, 
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

c。如果您使用单独的模块文件进行路由，则在路由模块中导入 CommonModule ，否则在 App模块 CommonModule >

// file app.routing.modules.ts
import { LoginComponent } from './login/login.component';
import { CommonModule } from "@angular/common";

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [RouterModule,RouterModule.forRoot(routes), CommonModule],
  exports: [RouterModule]
})

1. 如果您嵌套了模块，请在该特定模块中执行第一步

就我而言，第二种方法解决了我的问题。
希望对您有帮助

Answer 30

即使我遇到了同样的问题，我也在这里尝试了所有答案，但是一个简单的更改帮助我解决了这个问题，而不是在tr标记中包含* ngFor，而在{{1}中包含了它} 标签。希望对别人有帮助。

tbody