web-dev-qa-db-ja.com

モジュール '"angular2 / angular2"'にはエクスポートされたメンバー 'For'がありません

Angular2の公式Webサイトのチュートリアルに従っています。

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/[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>

そして、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);

angle2.d.tsはまだアルファ26です。

これでエラーメッセージは表示されず、表示されます

名前：友達：

ただし、値は挿入されません。そして、私はエラーメッセージを持っています：

show-properties.ts（7,2）：エラーTS2348：タイプ 'typeofComponentAnnotation'の値を呼び出すことができません。 'new'を含めるつもりでしたか？ show-properties.ts（10,2）：エラーTS2348：タイプ 'typeofViewAnnotation'の値を呼び出すことができません。 'new'を含めるつもりでしたか？メッセージTS6042：コンパイルが完了しました。ファイルの変更を監視しています。

typescriptangulartypescript1.5
7
Franva

あなたの問題は、ドキュメントが同期していないことです。最近インストールのドキュメントに従った場合は、最新バージョンalpha26のタイピングがインストールされているはずですが、これには多くの壊れた変更があります。また、ドキュメントでは、そのバージョンのコードでa23バージョンを使用しています。あなたはどちらかをすることができます

1）入力をv23に一致する古いバージョンに更新します。これは ここで見つける 。内容をコピーして./typings/angular2/angular2.d.tsに置き換えます。

2）angularスクリプトを alpha 26 にアップグレードし、いくつか修正します。

  • ForはNgForになり、IfはNgIfになりました
  • *forは*ng-forになり、*ifは*ng-if ..になりました。

  • injectables（ディレクティブ設定で使用する場合）はappInjectorになりました

  • 同じes6-promiseコマンドを使用して、rx-lite、rx、およびtsd query xxx --action installのタイピングをインストールします。

    デモ-2

    デモ-26

angular-class webpack starter からのスタートアップを使用することもできます。

13
PSL

はい、名前をng-forに変更しました。 ng-ifと同じです。 tsファイルで更新して表示するだけです。

いくつかの作業に興味がある場合は、ここにいくつかのサンプルがありますAngular 2.0の例： http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

4
TGH