[英]angular structural directives (*ngFor, *ngIf) not working after i upgrade from 8 to 10
I am using an angularmaterial project and i did an angular upgrade from v8 to v10 and when i try to add *ngFor, its not working.我正在使用 angularmaterial 项目,我将 angular 从 v8 升级到 v10,当我尝试添加 *ngFor 时,它不起作用。 i think structural directives are not working.
我认为结构性指令不起作用。 I am getting below error message.
我收到以下错误消息。
core.js:7824 Can't bind to 'ngForOf' since it isn't a known property of 'li'. core.js:7824 无法绑定到“ngForOf”,因为它不是“li”的已知属性。
my view我的观点
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>
my component我的组件
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
items=[1,2,3,4,5];
newHome: HomeModel = new HomeModel();
newHomeForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
}
my package.json我的 package.json
{
"name": "test-web",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.0.2",
"@angular/cdk": "^8.2.3",
"@angular/common": "~10.0.2",
"@angular/compiler": "~10.0.2",
"@angular/core": "~10.0.2",
"@angular/flex-layout": "^10.0.0-beta.32",
"@angular/forms": "~10.0.2",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "~10.0.2",
"@angular/platform-browser-dynamic": "~10.0.2",
"@angular/router": "~10.0.2",
"hammerjs": "^2.0.8",
"rxjs": "~6.6.0",
"tslib": "^1.9.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.0",
"@angular/cli": "~10.0.0",
"@angular/compiler-cli": "~10.0.2",
"@angular/language-service": "~10.0.2",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "^3.9.6"
}
}
Module code模块代码
import { NgModule } from '@angular/core';
import { HomeComponent } from './home/home.component';
import { ReactiveFormsModule } from '@angular/forms';
import { RegistrationComponent } from 'src/app/specification/registration/registration.component';
import { LoginComponent } from 'src/app/specification/login/login.component';
import { CustomerDashboardComponent } from 'src/app/specification/customer-dashboard/customer-dashboard.component';
@NgModule({
declarations: [
HomeComponent,
RegistrationComponent,
LoginComponent,
CustomerDashboardComponent,
],
imports: [
ReactiveFormsModule,
// FlexLayoutModule
]
})
export class HomeModule { }
I have start wuth angularmaterial v8 and upgraded to v10.我已经开始 wuth angularmaterial v8 并升级到 v10。 after that when i try to add *ngIf,*ngFor, i am not getting the expected result.
之后,当我尝试添加 *ngIf、*ngFor 时,我没有得到预期的结果。 I gave * ngIf="true" that also not working.
我给了 * ngIf="true"也不起作用。 Please help me on this.
请帮助我。
Add BrowserModule to imports: [] in @NgModule()将 BrowserModule 添加到导入:@NgModule() 中的 []
// older Angular versions
// import {BrowserModule} from '@angular/common';
import { BrowserModule } from '@angular/platform-browser'
..
..
@NgModule({
imports: [BrowserModule],
Try this also也试试这个
You have to import 'CommonModule' in the module where you are using these in-built directives like ngFor,ngIf etc.您必须在使用这些内置指令(如 ngFor、ngIf 等)的模块中导入“CommonModule”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.