Javascript Angular2表示不工作

我试图实现一个基本的购物清单，但我的ngFor在Angular中不起作用

从'angular2/angular2'导入{组件，视图}；
@组成部分({
选择器：“我的应用程序”
})
@看法({
模板：{{title}}
{{i}}
'
})
导出默认类MyAppComponent{
标题='ShoppinList'；
项目=[‘牛奶’、‘火腿’、‘鸡蛋’]；
}

您不必在此处使用

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

@组件({
选择器：“我的应用程序”，
模板：`
{{title}}
{{i}
`,
})
导出类应用程序{
标题='ShoppinList'；
项目=[‘牛奶’、‘火腿’、‘鸡蛋’]；
}

---

您不必在此处使用

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

@组件({
选择器：“我的应用程序”，
模板：`
{{title}}
{{i}
`,
})
导出类应用程序{
标题='ShoppinList'；
项目=[‘牛奶’、‘火腿’、‘鸡蛋’]；
}

---

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

import { Component } from '@angular/core'

---

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

import { Component } from '@angular/core'

@View（）

几乎在一年前被删除。如果您看到使用它的示例，只需将内容移动到

@Component（）

装饰器，而

指令

和

管道

则从

@Component（）

移动到

@NgModule（）

s

声明

您需要将

CommonModule

添加到

@NgModule（{imports:[CommonModule]，…}）导出类SomeModule{}

，在您想要使用

ngFor

的每个模块中（或附带Angular-

浏览器模块的其他指令已经包括
CommonModule
）

几乎在一年前被删除。如果您看到使用它的示例，只需将内容移动到

@Component（）

装饰器，而

指令

和

管道

则从

@Component（）

移动到

@NgModule（）

s

声明

---

您需要将

CommonModule

添加到

@NgModule（{imports:[CommonModule]，…}）导出类SomeModule{}

，在您要使用

ngFor

的每个模块中（或附带Angular-

BrowserModule

的其他指令已经包括

CommonModule

）.

这是使用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'];
}

从'angular2/angular2'导入{组件，视图}；
@组成部分({
选择器：“我的应用程序”，
模板：'
{{title}}

{{i}

'
})
导出默认类MyAppComponent{
标题：string='ShoppinList'；
项目：数组=[‘牛奶’、‘火腿’、‘鸡蛋’]；
}

这是使用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'];
}

从'angular2/angular2'导入{组件，视图}；
@组成部分({
选择器：“我的应用程序”，
模板：'
{{title}}

{{i}

'
})
导出默认类MyAppComponent{
标题：string='ShoppinList'；
项目：数组=[‘牛奶’、‘火腿’、‘鸡蛋’]；
}

您的组件应该包含

模板

，并且可以删除@

视图

。您的

import

语句不正确。也许您是从旧的测试版复制/粘贴的？您的组件应该包含

模板

，并且可以删除@

视图

。您的

import

语句不正确。也许您是从旧的测试版复制/粘贴的？