这个问题在这里已有答案：
我正在尝试设置一个简单的 ng-for 来循环一个角度项目列表，但却陷入困境 . 我已经尝试了Angular2 exception: Can't bind to 'ngFor' since it isn't a known native property中的解决方案（修复缺失 # ）但没有成功 .
EXCEPTION: Template parse errors:
Can't bind to 'ng-forOf' since it isn't a known native property ("<div class="ui link cards">
<div class="card" [ERROR ->]*ng-for="#project of projects">
<div class="image">
<img src="{{project.illustrat"): Projects@1:22
Property binding ng-forOf not used by any directive on an embedded template ("<div class="ui link cards">
[ERROR ->]<div class="card" *ng-for="#project of projects">
<div class="image">
<img src="{"): Projects@1:4
index.js
import * as stylesheet from '../assets/styles/app.scss';
import $ from 'jquery';
import jQuery from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;
import 'zone.js/lib/browser/zone-microtask';
import 'reflect-metadata';
import 'babel-polyfill';
import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app.component.js'
bootstrap(App, []);
app.component.js
import {Component} from 'angular2/core';
import {Projects} from '../app/projects/projects';
@Component({
selector: 'my-app',
template: '<projects>Loading...</projects>',
directives: [Projects]
})
export class App {
constructor(projects:Projects) {
this.projects = projects;
console.log(this.projects);
}
}
index.html
<html>
<body>
<my-app>
<ng-content></ng-content>
</my-app>
<script src="dist/app.js"></script>
</body>
</html>
project.js
import {Component, View} from 'angular2/core';
import {NgFor} from 'angular2/common';
@Component({
selector: 'projects, [projects]'
})
@View({
//templateUrl: '/app/projects/projects.html',
directives: [NgFor],
template: "<div *ng-for='#project of projects'> <p>{{project.description}} </div>",
})
export class Projects {
constructor() {
this.projects = [
{
"customer": "Matt Giampietro",
"description": "Lorem ipsum dolor sit amet…",
"name": "project #1"
},
{
"customer": "test",
"description": "Lorem ipsum dolor sit amet…",
"name": "project #2"
}
]
}
}
问题
-
如何解决这个问题？
-
使用内部/外部模板（即
templateUrl）失败
1 回答
ng-for在最近的Angular版本中不正确 . 模板已更改为区分大小写 . 现在这应该是ngFor另见Can't bind to 'ng-forOf' since it isn't a known native property