HTML文件更改后* ngFor问题 [英] Problem with *ngFor after changes in HTML file

问题描述

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

I have problem with *ngFor in Angular 8.

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

When I start Angular app (ng serve) *ngFor works great but when I change the HTML file where I use this loop (even if I add one space in other line) I have error:

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文件...

and when I restart app works again until change in HTML file...

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

Is it possible for me to change HTML files and see the changes without restarting the application.

我试图做的事情:

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

car.component.html

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.component.html

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

app.module.ts

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 8的Ivy Engine错误所致，请检查

It is due to a Bug for Ivy Engine for Angular 8, check the link for more information.

要么在 tsconfig.app.json 中禁用常春藤引擎，要么将模块更新为Angular 9候选版本.

Either Disable the Ivy Engine in tsconfig.app.json or update your modules to Angular 9 release candidates.

将 enableIvy 设置为 false ，以禁用 tsconfig.app.json

"angularCompilerOptions": {
    "enableIvy": false
}

这篇关于HTML文件更改后* ngFor问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！