Angular2（打字稿）ngFor不工作

我所試圖做的事：我基本上是試圖遍歷products變量，顯示內容爲行。Angular2（打字稿）ngFor不工作

問題：問題基本上是它似乎沒有工作。它所做的，當我加入ngFor的是，它完全隱藏應用程序的角部位。這意味着，有一個錯誤。當我檢查控制檯時，它似乎沒有顯示任何有用的信息（看起來像Angular2中還沒有友好的消息）。

我試過了：我試過導入CORE_DIRECTIVES並將它作爲指令傳遞，但是沒有奏效。我也試圖消除整個ngFor然後應用程序的其他部分似乎完美的工作。

我想要的是：如果您可以查看我的代碼並讓我知道我的錯誤是什麼，我將非常感激。先謝謝你。

所以，這是app.ts：

import { bootstrap } from "angular2/platform/browser"; 
import { Component } from "angular2/core"; 
import { Product } from './models.ts'; 

@Component({ 
    selector: 'table-rows', 
    template: ` 
     <tr *ngFor="#product of products"> 
      <td>{{ product.name }}</td> 
      <td>{{ product.quantity }}</td> 
      <td>{{ product.unitPrice }}</td> 
     </tr> 
    ` 
}) 
class TableRows { 
    products: Product[]; 

    constructor() { 
     this.products.push(new Product('GALAXY Note 3', 10, 500)); 
     this.products.push(new Product('MacBook Pro', 25, 1500)); 
    } 
} 

@Component({ 
    selector: 'app', 
    directives: [TableRows], 
    template: ` 
     <table class="table"> 
      <thead> 
       <tr> 
        <td>Product Name</td> 
        <td>Product Quantity</td> 
        <td>Product Unit Price</td> 
       </tr> 
      </thead> 
      <tbody> 
       <table-rows></table-rows> 
      </tbody> 
     </table> 
    ` 
}) 
class App { 
    constructor() { 

    } 
} 

bootstrap(App);

這裏的models.ts：

export class Product { 
    name: string; 
    quantity: number; 
    unitPrice: number; 

    constructor (
     name: string, 
     quantity: number, 
     unitPrice: number   
    ) { 
     this.name = name; 
     this.quantity = quantity; 
     this.unitPrice = unitPrice; 
    } 
}

最後，這裏的index.html的：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <title>Stock Table</title> 

     <link href="css/bootstrap.min.css" rel="stylesheet"> 

     <!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
     <![endif]--> 

     <script src="../node_modules/es6-shim/es6-shim.js"></script> 
     <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script> 
     <script src="../node_modules/systemjs/dist/system.src.js"></script> 
     <script src="../node_modules/rxjs/bundles/Rx.js"></script> 
     <script src="../node_modules/angular2/bundles/angular2.dev.js"></script> 

    </head> 
    <body> 
     <script> 
      System.config({ 
      packages: {   
       app: { 
       format: 'register', 
       defaultExtension: 'js' 
       } 
      } 
      }); 
      System.import('ts/app.js') 
       .then(null, console.error.bind(console)); 
     </script> 

     <nav class="navbar navbar-default navbar-static-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">Stock Table</a> 
       </div> 
       <div id="navbar" class="collapse navbar-collapse"> 

       </div> 
      </div> 
     </nav> 

     <div class="container"> 
      <app></app> 
     </div> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

來源

2016-02-21 Hassan Althaf