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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30770222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 03:01:24  来源:igfitidea点击:

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

typescriptangulartypescript1.5

提问by Franva

I am following the tutorial on the official Angular2 website.

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

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

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

Here is my .ts file:

这是我的 .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);

Here is my html:

这是我的 html:

<html>
<head>
        <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
        <script src="https://jspm.io/[email protected]"></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>

And I have installed angular2, Rx and es6-promise.

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

Still the error persists.

错误仍然存​​在。

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.

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



Update

更新

Here is my updated .ts code:

这是我更新的 .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 is still alpha 26.

angular2.d.ts 仍然是 alpha 26。

Now there is no error message and I can see

现在没有错误消息,我可以看到

name: Friends:

姓名: 朋友:

But no values are inserted. And I've got an error message:

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

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.

show-properties.ts(7,2):错误 TS2348:“typeof ComponentAnnotation”类型的值不可调用。您的意思是包括“新”吗?show-properties.ts(10,2):错误 TS2348:“typeof ViewAnnotation”类型的值不可调用。您的意思是包括“新”吗?消息 TS6042:编译完成。监视文件更改。

回答by PSL

Your issue is that the documentation is not in sync. If you followed the documentation for installation recently then it would have installed the typings for latest version alpha26, which has a lot of broken changes. And the documentation uses a23 version with that version of code. You can either

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

1) Update your typings to older version that matches v23, which you can find it here. Copy the contents and replace it in ./typings/angular2/angular2.d.ts.

1) 将您的输入更新为与 v23 匹配的旧版本,您可以在此处找到它。复制内容并将其替换为./typings/angular2/angular2.d.ts.

2) Upgrade your angular script to alpha 26and fix couple of things.

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

  • Foris now NgFor, Ifis now NgIf
  • *foris now *ng-for, *ifis now *ng-if...
  • injectables(if you intend to use in your directive settings) is now appInjector

  • install typings for es6-promise, rxand rx-liteusing the same tsd query xxx --action installcommand.

    Demo - 23

    Demo - 26

  • For现在NgForIf现在NgIf
  • *for现在*ng-for*if现在*ng-if……
  • injectables(如果您打算在指令设置中使用)现在是 appInjector

  • 安装typings for es6-promiserxrx-lite使用相同的tsd query xxx --action install命令。

    演示 - 23

    演示 - 26

You could also use the startup from angular-class webpack starter.

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

回答by TGH

Yes, the renamed for to ng-for. Same with ng-if. Just update it in your ts file and view.

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

I have a few samples here if you are interested in some working Angular 2.0 examples: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

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