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。

仍然存在错误。

消息TS6042：编译完成。注意文件更改。消息TS6032：检测到文件更改。开始递增编译... show-properties.ts（2,37）：错误TS2305：模块 '“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）：error TS2348：typeof的值 ViewAnnotation'不可调用。你的意思是包括'新'吗？消息TS6042：编译完成。注意文件更改。

Answer 1

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

1）将您的打字更新为与v23匹配的旧版本，您可以find it here。复制内容并将其替换为./typings/angular2/angular2.d.ts。

2）将角度脚本升级到alpha 26并修复几件事。

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

<强> Demo - 23

<强> Demo - 26

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

Answer 2

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

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

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

2 个答案: