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>

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

我做错了什么？

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

Answer 1

试试这个

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

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

Plunker Demo

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

1 个答案: