在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的最終版本

柱塞演示