web-dev-qa-db-ja.com

angular 4： 'li'の既知のプロパティではないため、 'ngForFor'にバインドできません

angular 4.を学習し始めました。これは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>
angulartypescriptangularjs-ng-repeatngfor
6
sa_1130

of内のforではなくngForにする必要があります

ngFor="let hobby of hobbies"
28
Sachila Ranawaka