Question

我不知道出了什么问题。 * NgIf，* ngFor会导致如下所示的错误消息。组件，模块，服务附加源内容。我需要你的建议。

错误消息

Can't bind to 'ngIf' since it isn't a known property of 'img'. ("oducts | productFilter:listFilter'>
                        <td>
                            <img [ERROR ->]*ngIf='showImage' [src] = 'product.imageUrl' [title] = 'product.productName' [style.width.px] = 'imag"): ng:///ProductModule/ProductListComponent.html@63:33
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("of products | productFilter:listFilter'>
                        <td>
                            [ERROR ->]<img *ngIf='showImage' [src] = 'product.imageUrl' [title] = 'product.productName' [style.width.px] = "): ng:///ProductModule/ProductListComponent.html@63:28
The pipe 'lowercase' could not be found ("     </td>
                        <td>{{product.productName}}</td>
                        <td>{{[ERROR ->]product.productCode | lowercase}}</td>
                        <td>
             "): ng:///ProductModule/ProductListComponent.html@68:30
Can't bind to 'ngForOf' since it isn't a known property of 'tr'. ("
                </thead>

产品list.component.ts

import { Component, OnInit } from '@angular/core';
import { IProduct } from './products';
import { StarComponent } from '../shared/star.component';
import { ProductService } from './product.service';

@Component({
    selector : 'pm-products',
    templateUrl : './product-list.component.html',
    styleUrls : ['./product-list.component.css'],
    //directives: [StarComponent]
})

export class ProductListComponent implements OnInit{
    pageTitle : string = "Product title";
    imageWidth : number = 50;
    imageMargin : number = 2;
    showImage : boolean = false;
    listFilter: string;
    products : IProduct[];
    errorMessage : string;

    constructor(private _productService : ProductService){

    }

    toggleImage() : void {
        this.showImage = !this.showImage;
    }

    ngOnInit() : void {
        console.log('In OnInit');
        this._productService.getProducts()
        .subscribe(products => this.products = products, error => this.errorMessage = <any>error);
    }

    onRatingClicked(message: string): void {
        this.pageTitle = 'Product List: ' + message;
    }
}

产品list.service.ts

import { Injectable } from '@angular/core';
import { IProduct } from './products';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

@Injectable()
export class ProductService{
    private _productUrl = '/src/api/products/products.json';
    constructor(private _http : Http){}
    getProducts(): Observable<IProduct[]> {
        return this._http.get(this._productUrl)
            .map((response: Response) => <IProduct[]> response.json())
            .do(data => console.log('All: ' +  JSON.stringify(data)))
            .catch(this.handleError);
    }

    getProduct(id: number): Observable<IProduct> {
        return this.getProducts()
            .map((products: IProduct[]) => products.find(p => p.productId === id));
    }

    private handleError(error : Response){
        console.log(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

product.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { ProductListComponent } from './product-list.component';
import { ProductDetailComponent } from './product-detail.component';
import { ProductService } from './product.service';
import { ProductDetailGuard } from './product-guard.service';
import { ProductFilterPipe } from './product-filter.pipe';

@NgModule({
  imports: [
    // SharedModule,
    RouterModule.forChild([
      { path: 'products', component: ProductListComponent },
      { path: 'product/:id',
        canActivate: [ ProductDetailGuard],
        component: ProductDetailComponent
      }
    ])
  ],
    declarations : [
        ProductListComponent,
        ProductDetailComponent,
        ProductFilterPipe
    ],
    providers : [
        ProductService
    ]
})

export class ProductModule { }

Answer 1

您必须在CommonModule中导入ProductModule才能访问ngIf ngFor等常用指令

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

@NgModule({
  imports: [
    CommonModule
  ]
  ...
})
export class ProductModule { }

另见

why lazy loaded module has to import commonModule? Angular 2

zone.js：569未处理的Promise拒绝：模板解析错误

1 个答案: