模块 '"angular2/angular2"' 没有导出成员 'For'答案

【问题标题】：Module '"angular2/angular2"' has no exported member 'For'模块 '"angular2/angular2"' 没有导出成员 'For'
【发布时间】：2015-06-11 01:45:42
【问题描述】：

我正在关注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。

错误仍然存在。

消息 TS6042：编译完成。监视文件更改。消息 TS6032：检测到文件更改。开始增量编译... show-properties.ts(2,37): error TS2305: Module '"angular2/angular2"' 没有导出成员 'For'。消息 TS6042：编译完成。监视文件更改。

更新

这是我更新的 .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)：错误 TS2348：“typeof”类型的值 ComponentAnnotation ' 不可调用。您的意思是包括“新”吗？ show-properties.ts(10,2)：错误 TS2348：“typeof”类型的值 ViewAnnotation' 不可调用。您的意思是包括“新”吗？消息 TS6042：编译完成。监视文件更改。

【问题讨论】：

标签： typescript angular typescript1.5

【解决方案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的启动。

【讨论】：

您好，我遵循了第二个建议。现在我收到一条错误消息。请查看我的更新。谢谢
当使用 Typescipt 时，你不应该使用 annotation as 我猜。我只是做import {Component, View, bootstrap, NgFor} from 'angular2/angular2'; 一个是用于 plnkr 中的 es6 代码。如果需要，还可以安装我上面在更新答案中提到的类型。另请注意constructor 的拼写，您的代码中有错字。希望你能在这里弄清楚。
感谢您的帮助和耐心等待。问题终于解决了:)
我正在使用 alpha 31 我得到 - 没有导出的成员“视图”
@JasonSpick 使用 import { Component,View, bootstrap } from 'angular2/angular2';相反 - 我认为他们改变了名字......

【解决方案2】：

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

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

【讨论】：

感谢 TGH，我已经让我的程序正常工作了。看了一些Angular2的教程后，我发现有太多过时的文档，中断更新等等，我决定等到稳定版本到来。但感谢您的帮助:)