模块“"angular2/angular2"”没有导出成员 'For'

Question

我正在关注 Angular2 官方网站上的教程。

https://angular.io/docs/js/latest/guide/displaying-data.html

这是我的 .ts 文件：

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap, For} from 'angular2/angular2';

@Component({
    selector: 'display'
})
@View({
    template: '<p>name: {{myName}}</p>' +
                '<p>Friends:</p>' +
                '<ul>'+
                 '<li *for="#name of names">'+
                    '{{name}}'+
                 '<li>'+
                '<ul>',
    directives: [For]
})
class DisplayComponent{
    myName: string;
    names: Array<string>;

    constructotr(){
        this.myName = "Alice";
        this.names = ["Winston", "Alex", "Shannon", "Irizu"];
    }
}

bootstrap(DisplayComponent);

这是我的 html:

<html>
<head>
        <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
        <script src="https://jspm.io/system@0.16.js"></script>
        <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>
</head>
<body>
    <display></display>
    <script>
      System.import('show-properties');
    </script>
</body>

</html>

并且我已经安装了 angular2、Rx 和 es6-promise。

错误仍然存在。

message TS6042: Compilation complete. Watching for file changes. message TS6032: File change detected. Starting incremental compilation... show-properties.ts(2,37): error TS2305: Module '"angular2/angular2"' has no expo rted member 'For'. message TS6042: Compilation complete. Watching for file changes.

更新

这是我更新的 .ts 代码：

/// <reference path="typings/angular2/angular2.d.ts" />
import {
 ComponentAnnotation as Component,
  ViewAnnotation as View, bootstrap, NgFor
} from 'angular2/angular2';



@Component({
    selector: 'display'
})
@View({
    template: '<p>name: {{myName}}</p>' +
                '<p>Friends:</p>' +
                '<ul>'+
                 '<li *ng-for="#name of names">'+
                    '{{name}}'+
                 '<li>'+
                '<ul>',
    directives: [NgFor]
})
class DisplayComponent{
    myName: string;
    names: Array<string>;

    constructotr(){
        this.myName = "Alice";
        this.names = ["Winston", "Alex", "Shannon", "Irizu"];
    }
}

bootstrap(DisplayComponent);

angular2.d.ts 仍然是 alpha 26。

现在没有错误提示，我可以看到

姓名：好友：

但是没有插入值。我收到一条错误消息：

show-properties.ts(7,2): error TS2348: Value of type 'typeof ComponentAnnotation ' is not callable. Did you mean to include 'new'? show-properties.ts(10,2): error TS2348: Value of type 'typeof ViewAnnotation' is not callable. Did you mean to include 'new'? message TS6042: Compilation complete. Watching for file changes.

Answer 1

您的问题是文档不同步。如果您最近按照文档进行安装，那么它会安装最新版本 alpha26 的类型，其中有很多损坏的更改。文档使用带有该版本代码的 a23 版本。您可以

1) 将您的类型更新为与 v23 匹配的旧版本，您可以 find it here。复制内容替换到./typings/angular2/angular2.d.ts.

2) 将您的 angular 脚本升级到 alpha 26 并修复一些问题。

For 现在是 NgFor，If 现在是 NgIf
*for 现在是 *ng-for，*if 现在是 *ng-if ...
injectables（如果您打算在指令设置中使用）现在是 appInjector
使用相同的 tsd query xxx --action install 命令为 es6-promise、rx 和 rx-lite 安装类型。

Demo - 23

Demo - 26

您也可以使用 angular-class webpack starter 的启动。

Answer 2

是的，将 for 重命名为 ng-for。与 ng-if 相同。只需在您的 ts 文件中更新它并查看即可。

如果您对一些有效的 Angular 2.0 示例感兴趣，我这里有一些示例：http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

模块“"angular2/angular2"”没有导出成员 'For'

Module '"angular2/angular2"' has no exported member 'For'

typescript

angular

typescript1.5