Angular 4 ngFor

0
votes

I dont understand why i am getting this error with Angular 4, i even imported ngFor from angular/common. The issues i'm finding are all related to angular 1 => angular 2. And the common library is imported by the browser module i believe. This is the same config as previous angular 2 apps i've built. Error:

Can't bind to 'ngForIn' since it isn't a known property of 'div'. ("]*ngFor='let entry in resumeEntries'>

Component

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]
})
1
javascriptnode.jsangularangular2-directives

1 Answers

4
votes

Angular has NgForOf, not NgForIn. It should be let varName of array, but you have in instead, so update your template code to this.

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

Check the API docs for NgForOf HERE for more details on the "decomposed" and "asterisk" syntax