1. ホーム
  2. angular

[解決済み] ng-forOf」は既知のネイティブプロパティではないため、バインドできない [重複] 。

2022-12-16 10:25:44

質問

私はここで基本的なAngular 2のチュートリアルに従おうとしています。

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

このコードでangularアプリを読み込んで名前を表示させることができますね。

import { Component, View, bootstrap } from 'angular2/angular2';

@Component({
    selector: "my-app"
})

class AppComponent {
    myName: string;
    names: Array<string>;
    constructor() {
        this.myName = "Neil";

    }

}
bootstrap(AppComponent);

しかし、文字列の配列を追加して、ng-forで表示しようとすると、以下のようなエラーを吐いてしまいます。

Can't bind to 'ng-forOf' since it isn't a known native property ("
    <p>Friends:</p>
    <ul>
        <li [ERROR ->]*ng-for="#name of names">
        {{ name }}
        </li>
"): AppComponent@4:16
Property binding ng-forOf not used by any directive on an embedded template ("
    <p>Friends:</p>
    <ul>
        [ERROR ->]<li *ng-for="#name of names">
        {{ name }}
        </li>
"): AppComponent@4:12

以下はそのコードです。

import { Component, View, bootstrap } from 'angular2/angular2';

@Component({
    selector: "my-app"
})

@View({
    template: `
        <p>My name: {{ myName }}</p>
        <p>Friends:</p>
        <ul>
            <li *ng-for="#name of names">
                {{ name }}
            </li>
        </ul>
    `,
    directives: [ NgFor ]
})

class AppComponent {
    myName: string;
    names: Array<string>;
    constructor() {
        this.myName = "Neil";
        this.names = ["Tom", "Dick", "Harry"];
    }

}
bootstrap(AppComponent);

何が足りないのでしょうか?

どのように解決するのですか?

α52を使う場合は CHANGELOG.md をチェックしてください。彼らは大文字と小文字を区別するようにテンプレートを変更しました。 ngFor の代わりに ng-for に変更します (他のすべてのディレクティブも同様)。

のような要素名は <router-outlet> のような要素名は、カスタム要素のタグ名にダッシュを必要とするカスタム要素仕様と互換性を保つために変更されていません。

RC.5 (および最終版) では ngFor といったディレクティブはデフォルトでは ambient ではありません。これらは、以下のように明示的に指定する必要があります。

@NgModule({
  imports: [CommonModule],

または、モジュールがブラウザのみにロックされることを気にしないのであれば

@NgModule({
  imports: [BrowserModule],

この BrowserModule 輸出 CommonModule も同様 WorkerAppModule のようになります。

更新

この BrowserModule はappモジュールでインポートする必要があり、他のモジュールでは CommonModule が代わりにインポートされるべきです。