我刚刚开始学习angular4。这是我尝试在Visual Studio Code中实现的简单代码,但仍然会出现此错误。
Uncaught Error: Template parse errors:
Can't bind to 'ngForFor' since it isn't a known property of 'li'. ("
</ul>
<ul>
<li [ERROR ->]*ngFor="let hobby for hobbies">{{hobby}}</li>
</ul>"): ng:///AppModule/UserComponent.html@6:6
Property binding ngForFor not used by any directive on an embedded template.
Make sure that the property name is spelled correctly and all directives are
listed in the "@NgModule.declarations".("
</ul>
<ul>
[ERROR ->]<li *ngFor="let hobby for hobbies">{{hobby}}</li>
</ul>"): ng:///AppModule/UserComponent.html@6:2
我尝试了将CommonModule添加到app.module文件的先前解决方案。但这并没有解决问题。我无法弄清楚出了什么问题。
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { UserComponent } from './components/user/user.component';
import {CommonModule} from '@angular/common';
@NgModule({
declarations: [
AppComponent,
UserComponent
],
imports: [
BrowserModule,CommonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
user.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
name:string;
age:number;
address: Address;
hobbies:string[];
constructor() {
console.log('constructor ran ...');
}
ngOnInit() {
console.log('ngOnInit ran ...');
this.name='Raul';
this.age=22;
this.address= {
street:'abc',
city:'xyz',
country: 'jkl'
}
this.hobbies=['reading','playing','swimming'];
}
}
interface Address{
street:string,
city:string,
country:string
}
user.component.html:
<h1>{{name}}</h1>
<ul>
<li>Age:{{age}}</li>
<li>Address:{{address.street}}, {{address.city}},{{address.country}}</li>
</ul>
<ul>
<li *ngFor="let hobby for hobbies">{{hobby}}</li>
</ul>
应该of
而不是for
里面ngFor
ngFor="let hobby of hobbies"
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句