Angular2 ng对于不起作用

Question

I am trying to implement a basic shopping list, but my ngFor in Angular is not working.

 import { Component, View } from 'angular2/angular2'; @Component({ selector: 'my-app' }) @View({ template: '<h1>{{title}}</h1><ul><li *ngFor="let i of items"><span>{{i}}</span></li></ul>' }) export default class MyAppComponent { title = 'ShoppinList'; items = ['Milk','Ham','Eggs']; } 

The only thing that appears is "loading..." and I am getting more than 10 cryptic errors.

Answer 1

Without trying it first I noticed an error in the import statement at the top. Should be:

import { Component } from '@angular/core'

Answer 2

@View() was removed almost a year ago. If you see examples that use it, just move the content to the @Component() decorator while directives and pipes were moved from @Component() to @NgModule() s declaration .

You need to add CommonModule to @NgModule({ imports: [CommonModule], ...}) export class SomeModule{} in every module where you want to use ngFor (or other directives shippled with Angular - BrowserModule already includes CommonModule ).

Answer 3

its good way to use ngIf and use your template inside your component properties.

import { Component, View } from 'angular2/angular2';


@Component({
  selector: 'my-app',
  template : '<div>
      <h1>{{title}}</h1>
      <ul *ngIf="items">
          <li *ngFor="let i of items"><span>{{i}}</span></li>
      </ul>
  </div>'
})

export default class MyAppComponent {
  title : string =  'ShoppinList';
  items : Array<string> =  ['Milk','Ham','Eggs'];
}

Answer 4

You don't have to use @View here.

@Component({
  selector: 'my-app',
  template: `
    <div>
      {{title}}
      <ul><li *ngFor="let i of items"><span>{{i}}</span></li></ul>
    </div>
  `,
})

export class App {
  title = 'ShoppinList';
  items = ['Milk','Ham','Eggs'];
}

Working plunker