web-dev-qa-db-fra.com

Impossible de se lier à 'ngForFor' car ce n'est pas une propriété connue de 'li'

Mon app.module

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 { }

mon produitSearch.module

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

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

})

export class ProductSearchModule{}

mon composant productSearch

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(){

    }
}

fichier productSearch.component.html

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

Comme vous pouvez le constater, c’est un exemple très élémentaire d’angular. Je veux juste imprimer le nom de chaque produit.

Erreur je reçois:

Impossible de se lier à 'ngForFor' car ce n'est pas une propriété connue de 'li'.

METTRE À JOUR:

Le constructeur de composant a changé comme

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

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

et le modèle html a changé comme

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

Mais j'obtiens toujours une erreur:

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>

Mettre à jour

Vous devez également ajouterCommonModulecomme indiqué ci-dessous,

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

Je pense que c’est: let item of Products pas for dans le fichier productSearch.component.html . Vérifier la documentation

20
Peter_Fretter

*ngFor est une directive qui réside dans la variable CommonModule (du package @angular/common) de Angular. Assurez-vous donc d'importer ce module dans votre propre module comme ceci:

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

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

Ce que j'aime faire, c'est créer un module partagé, qui importe tous les modules de base, tels que CommonModule, etc. et les réexporte. Ainsi, lorsque vous importez le module partagé, vous disposez déjà de toutes les directives de base.

0
Hinrich