Question

我想要做的事情：我基本上是在尝试迭代products变量并将内容显示为行。

问题：问题主要在于它似乎不起作用。添加ngFor时它的作用是它完全隐藏了应用程序的Angular部分。这意味着，出现了错误。当我检查控制台时，它似乎没有向我展示任何有用的东西（看起来好友消息还没有针对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>

Answer 1

例如：

*ngfor = "let number of numbers"

可能的错误：


拼写检查，

数组初始化，

不正确的HTML语法。

Angular2（TypeScript）ng不工作

1 个答案: