Angular2 (TypeScript) ngFor not working

Question

What I am trying to do: I am basically trying to iterate over the products variable and display the content as rows.

The problem: The problem basically is that it does not seem to work. What it does when I add the ngFor is that it completely hides the Angular part of the application. That means, there's an error. When I check the console, it doesn't seem to show me anything useful (looks like friendly messages aren't there yet for Angular2).

What I tried: I tried importing the CORE_DIRECTIVES and passing it as a directive, but that didn't work. I also tried removing the entire ngFor and then the rest of the application seemed to work flawlessly.

What I want: I would highly appreciate it if you can check out my code and let me know what my mistake is. Thank you in advance.

So, this is the 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);

Here's the 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;
    }
}

Finally, here's the 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>

Answer 1

You have to initilize the array named products :

products: Product[]= [];

Because you haven't initialized your array the interpreter throws the error of push of undefined . You must initialize your array before use.

You can find a working plunker with the solution here.

http://plnkr.co/edit/NpiCIsI88A1HmW2zC8rm?p=preview

Answer 2

for example:

*ngfor = "let number of numbers"

possible errors:

spell check,

array initialization,

improper html syntax.

Angular2 (TypeScript) ngFor not working

Question

2 answers

solution1
1 ACCPTED 2016-02-21 15:45:18

solution2
0 2017-09-01 17:34:59

Angular2 (TypeScript) ngFor not working

Question

2 answers

solution1 1 ACCPTED 2016-02-21 15:45:18

solution2 0 2017-09-01 17:34:59

solution1
1 ACCPTED 2016-02-21 15:45:18

solution2
0 2017-09-01 17:34:59