對象中的ngFor管道錯誤

Question

我在對象中使用管道為* ngFor，當我在我的組件中聲明管道時 - 我有這個錯誤（VS代碼） - >

[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>

Answer 1

使用最新的角度釋放，您不能將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 {
}

Answer 2

使管道名稱與管道類名稱不同。

例：

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

代替

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

並更改您的模板代碼

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

希望這可以幫助！！！