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

I am new to Angular2. I wanted to display the list of items . In my first-angular-js-2-application.js file I have done as under

我是Angular2的新手。我想显示项目列表。在我的第一个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"},
                  ];
  }
}

and in first-angular-js-2-application.html I have

并且在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>

Now when I run the application, it is not displaying the product names.

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

What wrong I am making?

我做错了什么?

N.B.~ I have generated Angular2 application through Yoeman

N.B.~我通过Yoeman生成了Angular2应用程序

1 个解决方案

#1

try this

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

I have created a plnkr but it is final version of angular2

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

Plunker Demo

#1