webentwicklung-frage-antwort-db.com.de

Kann nicht an 'ngForFor' binden, da es keine bekannte Eigenschaft von 'li' ist

Mein App.Modul

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { routing, appRoutingProviders} from './app.routing'
import { ProductSearchModule} from './productSearch/productSearch.module'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    ProductSearchModule
  ],
  providers: [appRoutingProviders],
  bootstrap: [AppComponent]
})
export class AppModule { }

mein productSearch.module

import {NgModule} from '@angular/core'
import {ProductSearchComponent} from './productSearch.component'

@NgModule({
    exports: [ProductSearchComponent],
    declarations: [ProductSearchComponent],

})

export class ProductSearchModule{}

mein ProduktSuchkomponente

import { Component, Output } from '@angular/core'
import { Product} from '../shared/product'

@Component({
    selector: 'product-search',
    templateUrl: 'productSearch.component.html',
    styleUrls: ['productSearch.component.css'],

})

export class ProductSearchComponent{
    /**
     *
     */
    constructor() {
        var p1 = new Product;
        p1.name = "alkan";

        var p2 = new Product;
        p2.name = "alper";
        this.Products = [p1, p2];

    }

    Products: Product[]

    search(){

    }
}

datei productSearch.component.html

<li *ngFor="let item for Products">{{item.name}}</li>

Wie Sie sehen, ist dies ein sehr einfaches Beispiel für Angular. Ich möchte nur den Namen jedes Produkts drucken.

Fehler ich bekomme:

Kann nicht an 'ngForFor' binden, da es keine bekannte Eigenschaft von 'li' ist.

UPDATE:

Komponentenkonstruktor geändert als

var p1 = new Product();
p1.name = "alkan";

var p2 = new Product();
p2.name = "alper";
this.Products = [p1, p2];

und Template-HTML geändert als

<li *ngFor="let item of Products">{{item.name}}</li>

Aber ich bekomme immer noch Fehler:

Can't bind to 'ngForOf' since it isn't a known property of 'li'
angular
9
Sefa
    var p1 = new Product();   //<----added ();
    p1.name = "alkan";

    var p2 = new Product();   //<----added ();
    p2.name = "alper";
    this.Products = [p1, p2];

     //<---replace for keyword by of keyword
    <li *ngFor="let item of Products">{{item.name}}</li>

Update

Sie müssen auch CommonModule hinzufügen, wie unten gezeigt.

import {NgModule} from '@angular/core';   
import {ProductSearchComponent} from './productSearch.component'

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

@NgModule({
    imports: [CommonModule],                   //<====added
    exports: [ProductSearchComponent],
    declarations: [ProductSearchComponent],

})
17
micronyks

Ich denke es ist: let item of Products nicht for in der productSearch.component.html-Datei. Überprüfen Sie die Dokumentation

20
Peter_Fretter

*ngFor ist eine Anweisung, die sich in Angulars CommonModule (aus dem @angular/common-Paket) befindet. Stellen Sie also sicher, dass Sie dieses Modul wie folgt in Ihr eigenes Modul importieren:

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

@NgModule({
    imports: [CommonModule, ...],
    exports: [...],
    declarations: [...],
});

Was ich gerne mache, ist das Erstellen eines gemeinsamen Moduls, das alle Basismodule wie CommonModule usw. importiert und erneut exportiert. Wenn Sie also das Shared Module importieren, stehen Ihnen bereits alle Basisanweisungen zur Verfügung.

0
Hinrich