Angular 4 ngFor答案

【问题标题】：Angular 4 ngForAngular 4 ngFor
【发布时间】：2018-02-13 02:31:08
【问题描述】：

我不明白为什么我在使用 Angular 4 时遇到此错误，我什至从 angular/common 导入了 ngFor。我发现的问题都与 angular 1 => angular 2 有关。我相信，公共库是由浏览器模块导入的。这与我之前构建的 Angular 2 应用程序的配置相同。 错误：

无法绑定到“ngForIn”，因为它不是“div”的已知属性。 ("]*ngFor='let entry in 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]
})

【问题讨论】：

标签： javascript node.js angular angular2-directives

【解决方案1】：

Angular 有NgForOf，而不是NgForIn。它应该是let varName of array，但你有in，所以将你的模板代码更新为这个。

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

查看 NgForOf HERE 的 API 文档以获取有关“分解”和“星号”语法的更多详细信息

【讨论】：

哦，我看到他们从 v4.0.0 更改了它，这有效，谢谢。