无法绑定到“ngForOf”，因为它不是角度 5 中的已知属性答案

【问题标题】：Can't bind to 'ngForOf' since it isn't a known property in angular 5无法绑定到“ngForOf”，因为它不是角度 5 中的已知属性
【发布时间】：2019-10-09 23:24:20
【问题描述】：

我是一个angular初学者，我开发了一个小应用程序，但是我有一个问题，*ngIf，*ngFor，nfForm 不起作用（我认为错误 CommonModule）

文件.html：

<div class="col-sm-3 form-group">
              <div>
              <select class="form-control">
                <option selected value="">Select Project</option>
                <option *ngFor='let app of projetsa' [value]="app?.projectId">
                   {{app?.ProjetName}}
                </option>
              </select>
            </div>
            </div>

appModule.ts：

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
.
.
.
@NgModule({
  declarations: [...],
  imports: [ BrowserModule, CommonModule,...],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

package.json：

"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^7.3.7",
.
.
.
}

【问题讨论】：

标签： angular ngfor

【解决方案1】：

如果是根模块 (AppModule)，则将 BrowserModule 添加到 @NgModule() 中的导入数组，否则为 CommonModule。

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

@NgModule({
  imports: [BrowserModule, /* or CommonModule */],
})

【讨论】：

非常感谢。我错过了包含 CommonModule 并且无法弄清楚原因。

【解决方案2】：

从appModule.ts 中删除CommonModule，因为CommonModule（Angular 模板的所有基础知识：绑定、*ngIf、*ngFor…），第一个应用程序模块除外，因为它已经是BrowserModule 的一部分。

BrowserModule 提供启动和运行浏览器应用程序。

BrowserModule 还从 @angular/common 重新导出 CommonModule，它意味着 AppModule 模块中的组件也可以访问每个应用都需要 Angular 指令，例如 NgIf 和 NgFor。

另请阅读this。

【讨论】：

【解决方案3】：

您需要从appModule.ts 中删除CommonModule 并将其导入您拥有file.html 的模块中

【讨论】：

【解决方案4】：

在 component.module.ts 文件中添加它应该可以工作：

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

@NgModule({
  imports: [CommonModule],
})

【讨论】：

【解决方案5】：

NgForOf 指令仅与<ng-template> 一起使用。

例如：

<ng-template ngFor let-app [ngForOf]="projetsa" let-i="index">
       <li>{{i}}  {{app}}</li>
  </ng-template>

【讨论】：