angular - Pipe-fel med ngFor i objekt

Jag använder pipe för *ngFor i Object, och när jag deklarerar pipe i min komponent - får jag detta fel (VS Code) ->

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

detta är min komponent:

    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)
            }

        }

och detta är en del av min mall med *ngFor-direktivet:

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

Svar #1

Med den senaste Angular-utgåvan kan du inte använda pipes och directives parametrar som @Component metadata, så ta bort pipes från @Component och lägg till det i dina modulers deklaration som nedan:

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 {
}

Svar #2

Gör så att ditt rörnamn skiljer sig från rörklassens namn.

Exempel :

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

Istället för

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

och ändra din mallkod som

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

Hoppas det här hjälper!!!

Relaterade artiklar