Что я пытаюсь сделать: Я в основном пытаюсь перебрать переменную products и отобразить содержимое в виде строк.Angular2 (TypeScript) 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>