Angular2（TypeScript）ng不起作用

Question

What I am trying to do: I am basically trying to iterate over the products variable and display the content as rows. 我正在尝试做的事情：我基本上是在尝试遍历products变量并将内容显示为行。

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. 当我添加ngFor ，它会完全隐藏应用程序的Angular部分。 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). 当我检查控制台时，似乎没有显示任何有用的信息（看来Angular2尚没有友好的消息）。

What I tried: I tried importing the CORE_DIRECTIVES and passing it as a directive, but that didn't work. 我尝试的方法：我尝试导入CORE_DIRECTIVES并将其作为指令传递，但这没有用。 I also tried removing the entire ngFor and then the rest of the application seemed to work flawlessly. 我还尝试删除了整个ngFor ，然后其余的应用程序似乎都能正常工作。

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 : 因此，这是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 : 这是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: 最后，这是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的数组：

products: Product[]= [];

Because you haven't initialized your array the interpreter throws the error of push of undefined . 由于尚未初始化数组，因此解释器将引发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 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. html语法不正确。

Angular2（TypeScript）ng不起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-02-21 15:45:18

解决方案2
0 2017-09-01 17:34:59

Angular2（TypeScript）ng不起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-02-21 15:45:18

解决方案2 0 2017-09-01 17:34:59

解决方案1
1 已采纳 2016-02-21 15:45:18

解决方案2
0 2017-09-01 17:34:59