Angular2 ng不起作用

Question

我正在尝试实现一个基本的购物清单，但我在Angular中的ngFor无效。

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'];
}

唯一出现的是“加载......”，我收到了10多个神秘错误。

Answer 1

首先没有尝试，我注意到顶部的import语句中有一个错误。应该是：

import { Component } from '@angular/core'

Answer 2

.php差不多一年前被删除了。如果您看到使用它的示例，只需将内容移至@View()装饰器，同时将@Component()和directives从pipes移至@Component() s {{1 }}

您需要在要使用的每个模块中@NgModule()添加declaration CommonModule（或其他指向Angular的指令 - @NgModule({ imports: [CommonModule], ...}) export class SomeModule{}已包含ngFor }）。

Answer 3

使用ngIf并在组件属性中使用模板的好方法。

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

您不必在此使用@View。

@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