Ecmascript 6 如何修复嵌入模板上的任何指令都不使用的属性绑定？_Ecmascript 6_Angular_Angular2 Directives_Angular2 Template

Ecmascript 6 如何修复嵌入模板上的任何指令都不使用的属性绑定？

ecmascript-6 angular

Ecmascript 6 如何修复嵌入模板上的任何指令都不使用的属性绑定？,ecmascript-6,angular,angular2-directives,angular2-template,Ecmascript 6,Angular,Angular2 Directives,Angular2 Template,我正试图为设置一个简单的ng，以循环使用angular中的项目列表，但却被卡住了。我已经在中尝试了解决方案（修复缺少的#），但没有成功 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="#

我正试图为设置一个简单的

ng，以循环使用angular中的项目列表，但却被卡住了。我已经在中尝试了解决方案（修复缺少的#
），但没有成功
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

app.component.js
从'angular2/core'导入{Component}；
从“../app/Projects/Projects”导入{Projects}；
@组成部分({
选择器：“我的应用程序”，
模板：“正在加载…”，
指令：[项目]
})
导出类应用程序{
建造商（项目：项目）{
这个项目=项目；
console.log（this.projects）；
}
}

index.html


project.js
从'angular2/core'导入{Component，View}；
从'angular2/common'导入{NgFor}；
@组成部分({
选择器：“项目，[项目]”
})
@看法({
//templateUrl:“/app/projects/projects.html”，
指令：[NgFor]，
模板：“{{project.description}}”，
})
出口类项目{
构造函数（）{
该项目=[
{
“客户”：“马特·詹皮特罗”，
“描述”：“Lorem ipsum dolor sit amet…”，
“名称”：“项目1”
},
{
“客户”：“测试”，
“描述”：“Lorem ipsum dolor sit amet…”，
“名称”：“项目2”
}
]
}
}

问题

我如何解决这个问题
内部/外部模板均失败（即templateUrl
）
ng for在最新版本中不正确。
模板已更改为区分大小写。现在应该是ngFor

另请参见如其他人所建议的，使用*ngFor，而不是*ng for
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, []);

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);
    }
}

<html>
<body>
    <my-app>
          <ng-content></ng-content>
    </my-app>
<script src="dist/app.js"></script>
</body>
</html>

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"
            }
        ]
    }
}