如何修复嵌入式模板上的任何指令未使用的属性绑定 ng-forOf? [复制]
Posted
技术标签:
【中文标题】如何修复嵌入式模板上的任何指令未使用的属性绑定 ng-forOf? [复制]【英文标题】:How to fix Property binding ng-forOf not used by any directive on an embedded template? [duplicate] 【发布时间】:2016-04-04 09:26:57 【问题描述】:我正在尝试设置一个简单的ng-for
以循环遍历 Angular 的项目列表,但被卡住了。我已经尝试了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
)
【问题讨论】:
正如其他人所建议的,使用 *ngFor,而不是 *ng-for 【参考方案1】:ng-for
在最近的 Angular 版本中不正确。
模板已更改为区分大小写。现在应该是ngFor
另见Can't bind to 'ng-forOf' since it isn't a known native property
【讨论】:
以上是关于如何修复嵌入式模板上的任何指令未使用的属性绑定 ng-forOf? [复制]的主要内容,如果未能解决你的问题,请参考以下文章