Imansible associare a ‘ng-forOf’ poiché non è una proprietà nativa conosciuta

Sto cercando di seguire il tutorial di base di Angular 2 qui:

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

Posso caricare l’app angular e visualizzare il mio nome con questo codice:

import { Component, View, bootstrap } from 'angular2/angular2'; @Component({ selector: "my-app" }) class AppComponent { myName: string; names: Array; constructor() { this.myName = "Neil"; } } bootstrap(AppComponent); 

Tuttavia, quando provo ad aggiungere una serie di stringhe e provo a visualizzarle con un ng-for, viene generato il seguente errore:

 Can't bind to 'ng-forOf' since it isn't a known native property (" 

Friends:

  • ]*ng-for="#name of names"> {{ name }}
  • "): [email protected]:16 Property binding ng-forOf not used by any directive on an embedded template ("

    Friends:

Ecco il codice:

 import { Component, View, bootstrap } from 'angular2/angular2'; @Component({ selector: "my-app" }) @View({ template: ` 

My name: {{ myName }}

Friends:

  • {{ name }}
`, directives: [ NgFor ] }) class AppComponent { myName: string; names: Array; constructor() { this.myName = "Neil"; this.names = ["Tom", "Dick", "Harry"]; } } bootstrap(AppComponent);

Cosa mi manca?

Se usi alpha 52, controlla CHANGELOG.md nel repository GitHub. Hanno cambiato il modello in maiuscolo-minuscolo, che è ngFor invece di ng-for (simile a tutte le altre direttive)

I nomi degli elementi come non sono stati modificati per rimanere compatibili con le specifiche degli elementi personalizzati che richiedono un trattino nel nome del tag degli elementi personalizzati.

In > = RC.5 (e finale) ngFor e direttive simili non sono ambient di default. Devono essere forniti esplicitamente come

 @NgModule({ imports: [CommonModule], 

o se non ti dispiace il modulo bloccato per essere solo browser

 @NgModule({ imports: [BrowserModule], 

Il BrowserModule esporta CommonModule come fa anche WorkerAppModule .

Aggiornare

Il BrowserModule dovrebbe essere importato nel modulo dell’app, in altri moduli dovrebbe invece essere importato CommonModule .

Con Angular 2.1.0+

Sembra che sia lo stesso eccetto che dovresti importare il BrowserModule nel modulo dell’app e importare CommonModule in altri (non è ansible importare BrowserModule due volte con percorsi a caricamento lento).

Con Angular 2 rc5:

Questa versione ha introdotto NgModules , devi importare BrowserModule nei tuoi moduli per usare ngFor e ngIf :

BrowserModule registra i fornitori di servizi applicativi critici. Include anche direttive comuni come NgIf e NgFor che diventano immediatamente visibili e utilizzabili in qualsiasi di questi modelli di componenti del modulo.

esempio:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [BrowserModule], providers: [], exports: [], declarations: [] }) export class MyModule { } 

In Angular2 beta ng-for non è corretto. dovrebbe essere *ngFor .

ngIf e ngFor sono dichiarati in CommonModule da @ angular / common .

CommonModule contribuisce a molte delle direttive comuni necessarie alle applicazioni, tra cui ngIf e ngFor.

BrowserModule importa CommonModule e lo ri-esporta. L’effetto netto è che un importatore di BrowserModule ottiene automaticamente le direttive CommonModule.

aggiorna il tuo codice come segue

 import { CommonModule } from '@angular/common'; @NgModule({ imports: [CommonModule] }) // In HTML 
  • {{customer.name}}
  • per ulteriori informazioni Modulo angular

    La syntax per la direttiva ngFor è

     {{name}} 

    Si noti che non è più #nome di nomi come era ma il nome dei nomi e il ngFor richiede * e fa distinzione tra maiuscole e minuscole.

    Dietro le altre risposte, un’altra ansible causa è l’utilizzo di un formattatore di file HTML-repacker che converte tutto il codice HTML, inclusi i modelli di componenti, in lettere minuscole.

    La sostituzione del modello angular è case sensitive per i tag ngFor e ngIf , almeno oggi, ma non posso dire nulla di sicuro per la prossima settimana.

    In particolare i plugin webpack, ad esempio htmljs o html-minify funzionano male come se convertissero tutto in minuscolo sulle loro impostazioni predefinite. Controlla il codice HTML nel testo compilato, potrebbe essere con tutte le lettere minuscole (come *ngif= …), che non saranno accettate, anche se nella tua fonte originale è corretto!

    Certamente rompe lo standard HTML5.

    Succede perché il nostro più bel sviluppo angular2 pensa “loro vogliono seguire html5 più da vicino” , ma ci sono sempre delle sorprendenti eccezioni, rendendo il lavoro con angular2 sempre migliore e migliore.

    Potrebbe anche essere causato da un errore di battitura. Ho appena affrontato questo problema che ho avuto

     

    Come vedi, è ansible lasciare ordini o ordini invece di lasciare l’ordine

    Dato che ha avuto così tanto successo sull’altro tema contrassegnato come duplicato di questo , ecco una mia risposta che ha ricevuto molti upvotes:

    Solo per chi lo manca, ho anche avuto un problema in cui ho digitato ngif piuttosto che ngIf (notare il capitol ‘I’).

    Stai attento all’errore di battitura: lo è

    * ngFor

    • non ng-for
    • non ngfor
    • non ng-For