2017-09-04 20 views
0

Angular 4でこのエラーが発生する理由を理解できません。角度/共通からngForをインポートしました。私が見つけている問題はすべて角度1 =>角度2に関連しています。そして共通のライブラリは私が信じるブラウザモジュールによってインポートされます。これは私が構築した以前の角度2のアプリと同じ設定です。 エラー:Angular 4 ngFor

'ngForIn'にはバインドできません。 'ngForIn'は 'div'の既知のプロパティではないため、バインドできません。 ( "] * ngFor => 'resumeEntriesのエントリを聞かせて'

コンポーネント

import { Component, OnInit } from '@angular/core'; 
import {RetrieveService} from '../../services/retrieve.service'; 
@Component({ 
selector: 'app-resume', 
templateUrl: './resume.component.html', 
styleUrls: ['./resume.component.css'] 
}) 
export class ResumeComponent implements OnInit { 
resumeEntries:any[]; 
constructor(private retrieveService:RetrieveService) { } 

ngOnInit() { 
    this.retrieveService.getResume().subscribe(response=>{ 
    this.resumeEntries=response.entries; 
    }); 
} 

}

HTML

<div *ngFor='let entry in resumeEntries'> 
works 
</div> 

App.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import {RouterModule,Routes} from '@angular/router'; 
import { HttpModule } from '@angular/http'; 

//components 
... 
//services 
import {RetrieveService} from './services/retrieve.service'; 
const AppRoutes: Routes =[ 
    {path:'resume',component:ResumeComponent}, 
    {path:'admin', component:AdminComponent}, 
    {path:'',component:LandingPageComponent} 
] 
@NgModule({ 
    declarations: [ 
    AppComponent, 
    LandingPageComponent, 
    DashBarComponent, 
    ResumeComponent, 
    SocialMediaComponent, 
    AdminComponent, 
    AdminContactInfoComponent 
    ], 
    imports: [ 
    BrowserModule, 
    RouterModule.forRoot(AppRoutes), 
    HttpModule 
    ], 
    providers: [RetrieveService], 
    bootstrap: [AppComponent] 
}) 

答えて

3

角はNgForOfであり、NgForInではありません。 let varName of arrayである必要がありますが、代わりにinがあるので、テンプレートコードをこれに更新してください。

<div *ngFor='let entry of resumeEntries'> 
works 
</div> 

ああ、私はあなたに感謝し、彼らはこれが働いていた、v4.0.0のようにそれを変え見る「分解」と「アスタリスク」構文

+0

の詳細についてはNgForOfHEREのためのAPIドキュメントを確認してください。 –

関連する問題