在angular2中使用ngFor不会显示迭代名称

Question

我是Angular2的新手。 我想显示物品清单。 在我的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>

现在，当我运行该应用程序时，它没有显示产品名称。

我在做什么错？

NB〜我已经通过Yoeman生成了Angular2应用程序

Answer 1

尝试这个

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

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

柱塞演示