無法綁定到“ngForOf”，因為它不是 angular 5 中的已知屬性

Question

我是 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;
}

包.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",
.
.
.
}

Answer 1

如果它是根模塊（AppModule）， @NgModule() BrowserModule 添加到@NgModule()導入數組，否則為 CommonModule。

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

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

Answer 2

從appModule.ts刪除CommonModule ，因為CommonModule （Angular 模板的所有基礎知識：綁定、*ngIf、*ngFor...），除了第一個 app 模塊，因為它已經是BrowserModule的一部分。

BrowserModule 提供啟動和運行瀏覽器應用程序必不可少的服務。

BrowserModule 還從@angular/common 重新導出了 CommonModule，這意味着 AppModule 模塊中的組件也可以訪問每個應用程序需要的 Angular 指令，例如 NgIf 和 NgFor。

也讀這個。

Answer 3

您需要從appModule.ts刪除CommonModule並將其導入到您擁有file.html的模塊中

Answer 4

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

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

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

Answer 5

NgForOf指令僅與<ng-template>使用。

例如：

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