Javascript 在angular2中未使用ngFor显示迭代名称

我是安格拉尔的新手。我想显示项目列表。在我的first-angular-js-2-application.js文件中，我已经按照下面的步骤完成了

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

@Component({
  selector: 'first-angular-js-2-application'
})

@View({
  templateUrl: 'first-angular-js-2-application.html'
})

export class FirstAngularJs2Application {

  constructor() {
    console.info('FirstAngularJs2Application Component Mounted Successfully');

     public products = [
                     {name: "Butter"},
                     {name: "Milk"},
                     {name: "Yogurt"},
                     {name: "Cheese"},
                  ];
  }
}

在first-angular-js-2-application.html中我有

<h1><b><font color="blue">Product names</font></b></h1>
<ul>
              <li *ngFor="#p of products" >
                  {{ p.name }}
              </li>
           </ul>

产品名称


{{p.name}}

现在，当我运行应用程序时，它不会显示产品名称

我做错了什么

注意~我已经通过Yoeman生成了Angular2应用程序

<li *ngFor="let p of products" >
                  {{ p.name }}
              </li>

{{p.name}}

我已经创建了一个plnkr，但它是angular2的最终版本

---

我收到此错误异常：模板解析错误：无法绑定到“ngFor”，因为它不是已知的本机属性（“Product name

]*ngFor=“let p of products”>{{p.name}”他使用旧版本

'angular2/core'

@priyanka.sarkar:您使用的是angular 2的最终版本吗？@priyanka.sarkar:npm update--save将根据包中定义的版本范围将package.json中的所有包更新为最新版本。josn@priyanka.sarkar：添加样式表的两种方法。您可以使用每个组件的工作表/或者您可以参考外部样式表。检查此项请修复您的代码。

公共产品是否在构造函数内？是的，它在构造函数内