2016-06-14 5 views
0

Nach Arbeit ist meine Komponente:Angular 2 * ngFor nicht

import { Component } from 'angular2/core'; 

@Component({ 
    selector: 'test', 
    template: 
    ` 
     <ul > 
     <li *ngFor="let t of test"> 
     <span >{{t}}</span> 
     </li> 
     </ul> 
    ` 
}) 

export class TestComponent implements OnInit{ 
    test: string[]; 
    constructor(){ 
    this.test = ["Saab", "Volvo", "BMW"]; 
    } 
} 

Ich erhalte die folgende Fehlermeldung, wenn ich versuche, die Komponente zu laden:

EXCEPTION: Template parse errors: 
    Can't bind to 'ngFor' since it isn't a known native property ("<ul > 
     <li [ERROR ->]*ngFor="let t of test"> 
      <span >{{t}}</span> 
     </li> 
    "): 

Auch bin ich, ob ich nicht sicher, sollte beim Importieren der Komponente '@ angular/core' oder 'angular2/core' verwenden.

+0

'@ Winkel/core' hilft kommt aus dem Release-Kandidaten und ist neuer. Nicht sicher, warum Sie diesen Fehler sehen würden. – Katana314

+0

Welche Version von Angular2 verwenden Sie? –

+0

Denken Sie, dass Sie von '@ angular/core importieren sollten, wenn Sie" 2.0.0-rc.1 "verwenden – pingo

Antwort

-1

Ihre Vorlage sollte sein:

<ul> 
    <li *ngFor="#t of test"> 
     <span >{{t}}</span> 
    </li> 
</ul> 

Oder diese Art und Weise in neueren Versionen:

<ul> 
    <li *ngFor="let t of test"> 
     <span>{{t}}</span> 
    </li> 
</ul> 
+1

Die Verwendung von # in ngFor wird nicht mehr empfohlen und alle seine Verwendung sollte in 'Let' –

+0

konvertiert werden Aber das funktioniert nicht für mich. – UnderWood

+0

@UnderWood dann haben Sie eine veraltete Angular2-Version. –

0

Ich erlebte ein ähnliches Verhalten. Das Problem war, dass ich die minimierte Version von Angular 2 in meinen HTML-Code einfügte.

Wenn es so ist, versuchen Sie die unminimized Datei von Angular

1

Mit Let das Problem für mich schließen aufgelöst

<ul> 
 
    <li *ngFor = "let test of testArray">{{test}}</li> 
 
</ul>

2

Das Problem kann auftreten, da Sie die importierte haben Gemeinsames Modul zu Ihrem aktuellen Modul Ihre Verwendung.

try Import

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

in Ihr aktuelles Modul und sehen, ob das Problem behoben.

das gemeinsame Modul fügen Sie alle eingebauten Richtlinien von Winkel 2.

see commonModule documentation von angular.io

Hoffnung, dass :)