zone.js：569未處理的承諾拒絕：模板解析錯誤

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

你必須在你的ProductModule導入CommonModule有機會獲得共同的指令就像ngIfngFor等

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

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

參見

• why lazy loaded module has to import commonModule? Angular 2