管误差ngFor在对象

问题描述：

我在使用对象为管* 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>

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

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

答

随着最新版本的角度你不能使用pipes和directives参数@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 { 
}

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

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

不，从调试器在crome –

答

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

例子：

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

相反

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

的

，改变像

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

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

管误差ngFor在对象

相关推荐