Question

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

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

Answer 1

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

BrowserModule提供了启动和运行操作系统所需的服务。   浏览器应用程序。

BrowserModule还从@ angular / common重新导出CommonModule，   表示AppModule模块中的组件也可以访问   每个应用程序都需要的角度指令，例如NgIf和NgFor。

也请阅读this。

Answer 2

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

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

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

Answer 3

将其添加到component.module.ts文件中应该可以：

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

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

Answer 4

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

Answer 5

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

例如：

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

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

5 个答案: