web-dev-qa-db-fra.com

Impossible de se lier à 'ng-forOf' car ce n'est pas une propriété native connue

J'essaie de suivre le tutoriel de base Angular 2 ici:

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

Je peux faire en sorte que l'application angular se charge et affiche mon nom avec le code suivant:

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

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

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

    }

}
bootstrap(AppComponent);

Cependant, lorsque j'essaie d'ajouter un tableau de chaînes et de les afficher avec un ng-for, l'erreur suivante est générée:

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

Voici le code:

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);

Qu'est-ce que je rate?

angular
85
Neil

Si vous utilisez l'alpha 52, consultez le CHANGELOG.md dans le dépôt GitHub. Ils ont changé le modèle en respectant la casse, qui est ngFor au lieu de ng-for (similaire pour toutes les autres directives)

Les noms d'éléments tels que <router-outlet> n'ont pas été modifiés pour rester compatibles avec la spécification d'éléments personnalisés qui requiert un tiret dans le nom de balise des éléments personnalisés.

In > = RC.5 (et final) ngFor et les directives similaires ne sont pas ambiants par défaut. Ils doivent être fournis explicitement comme

@NgModule({
  imports: [CommonModule],

ou si cela ne vous dérange pas que le module soit verrouillé pour n'être que du navigateur

@NgModule({
  imports: [BrowserModule],

Le BrowserModule exporte CommonModule comme aussi WorkerAppModule le fait.

Mettre à jour

BrowserModule doit être importé dans le module d'application, dans les autres modules, CommonModule doit être importé à la place.

142
Günter Zöchbauer

Avec Angular 2.1.0 +

Il semble que ce soit la même chose, sauf que vous devez importer le BrowserModule dans votre module d'application et importer CommonModule dans d'autres (vous ne pouvez pas importer BrowserModule deux fois avec des itinéraires à chargement paresseux).

Avec Angular 2 rc5:

Cette version introduit NgModules , vous devez importer BrowserModule dans vos modules pour pouvoir utiliser ngFor et ngIf:

BrowserModule enregistre les fournisseurs de services d'applications critiques. Il inclut également des directives communes telles que NgIf et NgFor, qui deviennent immédiatement visibles et utilisables dans tous les modèles de composants de ce module.

exemple: 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


@NgModule({
  imports: [BrowserModule],
  providers: [],
  exports: [],
  declarations: []
})
export class MyModule { }
34
n00dl3

Dans Angular2 beta ng-for n'est pas correct. ce devrait être *ngFor.

13
Buddhika Kulathilaka

ngIf et ngFor sont déclarés dans CommonModule à partir de @ angular/common .

CommonModule contribue à de nombreuses directives courantes nécessaires aux applications, notamment ngIf et ngFor.

BrowserModule importe CommonModule et l'exporte à nouveau. En définitive, un importateur de BrowserModule obtient automatiquement les directives CommonModule.

mettre à jour votre code comme suit

import { CommonModule } from '@angular/common';

@NgModule({
imports: [CommonModule]
})
// In HTML
<li *ngFor="let customer of customers">{{customer.name}}</tr>

pour plus d'informations Module angulaire

10
Praveen M P

La syntaxe de la directive ngFor est la suivante:

<tr *ngFor="let name of names">{{name}}</tr>

Notez que n'est plus #nom de noms tel qu'il était mais laissez le nom de noms et le ngFor nécessite le * et est sensible à la casse.

5
Gary

Derrière les autres réponses, une autre cause possible est que vous utilisez un formatter-repacker html qui convertit tout votre code HTML - y compris les modèles de composant - en minuscule.

La substitution de modèle Angular est sensible à la casse pour les balises ngFor et ngIf, du moins aujourd'hui, mais je ne peux rien dire pour la semaine suivante.

Les plugins Webpack, par exemple htmljs ou html-minify, fonctionnent mal car ils convertissent tout en minuscule avec leurs paramètres par défaut. Double-cocher le code HTML dans le texte compilé, il peut être en minuscule (comme *ngif=...), ce qui ne sera pas accepté, même si dans votre source originale, il est correct!

Bien sûr, cela casse le standard HTML5.

Cela se produit parce que notre développement angular2 le plus merveilleux pense "ils souhaitent suivre html5 de plus près", mais il y a toujours des surprises exceptions, rendant le travail avec angular2 toujours meilleur et meilleur.

4
peterh

Cela pourrait aussi être causé par une faute de frappe. Je viens de faire face à ce problème que j'avais

<div class="row" *ngFor="let order or orders">

Comme vous le voyez, il y a ordre ou ordres au lieu de ordre: ordres

1
Timothy

Attention à la faute de frappe: c'est

* ngFor

  • pas ng-pour
  • pas ngfor
  • pas ng-pour
1
Yassin

Etant donné qu’il a eu tant de succès sur l’autre numéro est considéré comme un doublon de celui-ci , voici une de mes réponses qui a reçu de nombreuses critiques positives:

Juste pour ceux qui le manquent, j'ai également eu un problème où j'ai tapé ngif plutôt que ngIf (remarquez le capitol 'I').

0
dudewad

Mon problème était dû à une exportation manquante du composant contenant le * ngFor. Ce composant (MyComponentWithNgFor) a déjà été importé et déclaré dans mon SharedModule. Le SharedModule a également importé le CommonModule d'Angular, de sorte que tout se passe bien.

Cependant, j'utilisais mon composant avec * ngFor dans un autre module - appelons-le ModuleB - qui importait SharedModule, afin de pouvoir utiliser MyComponentWithNgFor.

Ma solution consistait simplement à ajouter mon composant contenant le * ngFor au tableau des exportations de mon SharedModule, comme suit:

@NgModule({
  imports: [ CommonModule ],
  declarations: [ MyComponentWithNgFor ],
  exports: [ MyComponentWithNgFor ]
})
export class SharedModule { }

Cela a permis à mon ModuleB (qui importe SharedModule) d'utiliser MyComponentWithNgFor.

0
Ittit