更改 HTML 文件后 *ngFor 出现问题答案

【问题标题】：Problem with *ngFor after changes in HTML file更改 HTML 文件后 *ngFor 出现问题
【发布时间】：2019-11-29 03:59:50
【问题描述】：

我在 Angular 8 中遇到 *ngFor 问题。

当我启动 Angular 应用程序 (ng serve) *ngFor 效果很好，但是当我更改使用此循环的 HTML 文件时（即使我在另一行添加了一个空格）我有错误：

ERROR Error: Template error: Can't bind to 'ngForOf' since it isn't a known property of 'li'. 
    at createUnknownPropertyError (core.js:15118)
    at elementPropertyInternal (core.js:14984)
    at Module.ɵɵproperty (core.js:16569)
    at CarListComponent_Template (car-list.component.html:5)
    at executeTemplate (core.js:14533)
    at checkView (core.js:15957)
    at componentRefresh (core.js:15715)
    at refreshChildComponents (core.js:14214)
    at refreshDescendantViews (core.js:14120)
    at checkView (core.js:15958)
ERROR Error: Template error: Can't bind to 'ngForOf' since it isn't a known property of 'div'.
(...)

当我重新启动应用程序时，它会再次工作，直到 HTML 文件发生变化...

我是否可以更改 HTML 文件并在不重新启动应用程序的情况下查看更改。

我想做什么：

F12 > disable cache
in app.module.ts import CommonModule 
in app.module.ts import BrowserModule

car.component.html

<ul>
    <li *ngFor="let car of cars">id: {{car.id}}, name: {{ car.name }}</li>
</ul>
 
<div *ngFor="let car of cars">
    id: {{car.id}}, name: {{ car.name }}
</div>

app.component.html

<app-car-list></app-car-list>

app.module.ts

// import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { CarListComponent } from './shared/car-list/car-list.component';

@NgModule({
  declarations: [
    AppComponent,
    CarListComponent
  ],
  imports: [
    // CommonModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

标签： angular ngfor angular-template angular8

【解决方案1】：

这是因为您没有在 module.ts 文件中添加 CommonModule 和 BrowserModule。 CommonModule 将导出所有基本的 Angular 指令和管道，例如 NgIf、NgForOf、DecimalPipe 等。由BrowserModule 重新导出，当您使用 CLI new 命令创建新应用时，它会自动包含在根 AppModule 中。

import { NgModule } from  '@angular/core';
import { CommonModule } from  '@angular/common';
import { BrowserModule } from '@angular/platform-browser';

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

【讨论】：

我试过了：CommonModule & BrowserModule, olny BrowserModule，而且只有 CommonModule... 结果是一样的:(

【解决方案2】：

这是由于 Ivy Engine for Angular 8 的一个错误，请查看link 以获取更多信息。

要么在 tsconfig.app.json 中禁用 Ivy 引擎，要么将您的模块更新为 Angular 9 候选版本。

在 tsconfig.app.json

中将 enableIvy 设置为 false 以禁用 Ivy

"angularCompilerOptions": {
    "enableIvy": false
}

【讨论】：

【解决方案3】：

您可以在 for 循环中添加 ?。这就是所有需要的。

*ngFor="let coin of btc?.data"

参考：https://www.youtube.com/watch?v=OptW5UXTz6U

【讨论】：