以角度2显示ng中的列表

时间:2016-11-19 07:06:13

标签: angular

我是角色2更新我写了显示电影列表的代码,但显示错误请检查我的代码...

下面是我的代码

component.ts:file

import { Component} from '@angular/core';
@Component({
  selector:'my-app',
  template:`<h1>welcome to my shop</h1>
  <p>we have the following movies available</p>
  <div>
  <p *ngfor=#movie of movieList>{{movie}}</p>
  </div>`
})
export class MyShopComponent{
  public movieList=['batman vs superman','civil war','deadpool']
}

app.module.ts:file

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { MyShopComponent }  from './app.component';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    MyShopComponent
  ],
  bootstrap: [ MyShopComponent ]
})
export class AppModule { }

1 个答案:

答案 0 :(得分:5)

内部组件模板ngFor应使用let来定义当前可迭代变量。同时使用*ngfor

的换行属性更正从*ngFor"的拼写错误
<p *ngFor="let movie of movieList">{{movie}}</p>

Demo Plunkr