eckig 4: Kann nicht an 'ngForFor' binden, da es keine bekannte Eigenschaft von 'li' ist

Question

Ich habe gerade angefangen, eckig 4 ​​zu lernen. Dies ist ein einfacher Code, den ich in Visual Studio implementieren möchte Code, aber immer wieder diesen Fehler.

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 

Ich habe vorherige Lösungen versucht, das CommonModule zur Datei app.module hinzuzufügen. Aber es hat das Problem nicht gelöst. Ich kann nicht herausfinden, was falsch ist.

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> 

Answer 1

sollte of statt for innerhalb des ngFor

ngFor="let hobby of hobbies"