2016-09-27 73 views
3

我在使用对象为管* ngFor,当我在我的组件声明管 - 我得到这个错误(VS代码) - >管误差ngFor在对象

[ts] Argument of type '{ selector: string; templateUrl: string; pipes: typeof ObjNgFor[]; providers: typeof TableCompone...' is not assignable to parameter of type 'ComponentMetadataType'. 
    Object literal may only specify known properties, and 'pipes' does not exist in type 'ComponentMetadataType' 

这是我的组件:

import { Component, OnInit, Pipe, PipeTransform } from '@angular/core'; 

     @Pipe({ name: 'ObjNgFor', pure: false }) 
     export class ObjNgFor implements PipeTransform { 
      transform(value: any, args: any[] = null): any { 
       return Object.keys(value).map(key => Object.assign({ key }, value[key])); 
      } 
     } 

     @Component({ 
      selector: 'tablecomponent', 
      templateUrl: 'app/table.template.html', 
      pipes: [ObjNgFor], 
      providers: [TableComponentService] 
     }) 
     export class TableComponent implements OnInit { 

      lists: any; 

      constructor(public _service: TableComponentService) { 

      } 

     ngOnInit() { 
     this._service.getServices() 
      .subscribe(lists => this.lists = lists) 
      } 

     } 

,这是我的模板与*ngFor direcrive部分:

<tr *ngFor="let list of lists | ObjNgFor"> 
       <td>{{ list.name}}</td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
</tr> 
+0

你可以有一个管道名称与类名称不完全相同吗? –

+0

@Harry Ninh你的意思是重命名管道或类?它不仍然工作 –

回答

6

随着最新版本的角度你不能使用pipesdirectives参数@Component元数据,以便从@Component删除pipes并将其添加到您的模块声明如下:

import { Component, NgModule, OnInit, Pipe, PipeTransform } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 

@Pipe({ name: 'objngfor', pure: false }) 
export class ObjNgFor implements PipeTransform { 
    transform(value: any, args: any[] = null): any { 
    return Object.keys(value).map(key => Object.assign({ key }, value[key])); 
    } 
} 

@Component({ 
    selector: 'tablecomponent', 
    templateUrl: 'app/table.template.html' 
}) 
export class TableComponent implements OnInit { 
    lists: any; 
    constructor(public _service: TableComponentService) {} 
    ngOnInit() { 
    this._service.getServices().subscribe(lists => this.lists = lists) 
    } 
} 

@NgModule({ 
    imports  : [HttpModule], 
    declarations : [TableComponent,ObjNgFor], 
    providers : [TableComponentService] 
}) 
export class AppModule { 
} 
+0

感谢您快速回答!在app.module.ts我添加我的管道这个导入命令:'从'./table.component';'导入{ObjNgFor},并声明'声明:[AppComponent,TableComponent,ObjNgFor]',现在我有这个错误 - >'原来的例外:不能将undefined或null转换为对象' –

+0

你会得到这个错误吗?在你的管道? – ranakrunal9

+0

不,从调试器在crome –

0

让你管的名字从管类名称不同。

例子:

@Pipe({ name: 'objngfor', pure: false }) 

相反

@Pipe({ name: 'ObjNgFor', pure: false }) 

,改变像

<tr *ngFor="let list of lists | objngfor"> ... </tr> 

希望这有助于你的模板代码!