Angular4中reverse管道报错：找不到该管道的问题求助

Hey there, let's fix that "reverse pipe not found" issue you're facing! The root problem here is that you've bundled your pipe logic directly into your TransactionComponent class, which isn't how Angular expects pipes to be structured. Let's break down the fix step by step:

Step 1: Extract the Reverse Pipe into a Standalone File #

First, create a new file named reverse.pipe.ts and move your pipe logic into it. This keeps the pipe as a reusable, standalone class—exactly what Angular needs:

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

@Pipe({
  name: 'reverse',
  pure: false
})
export class ReversePipe implements PipeTransform {
  transform(values: any): any {
    if (values) {
      return values.slice().reverse();
    }
    return values; // Add a fallback to avoid undefined return issues
  }
}

Step 2: Clean Up Your Transaction Component #

Remove all pipe-related code from transaction.component.ts—your component should only handle component-specific logic, not pipe implementation:

import { OnInit } from '@angular/core';

export class TransactionComponent implements OnInit {
  // Your component properties, methods, and OnInit logic here
  .....//code
}

Step 3: Declare the Pipe in Your NgModule #

Angular needs to register your pipe to recognize it. Add the ReversePipe to the declarations array of your module (this is typically app.module.ts or a feature module if you're using one):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReversePipe } from './reverse.pipe'; // Import your new pipe
import { TransactionComponent } from './transaction.component'; // Import your component

@NgModule({
  declarations: [
    ReversePipe,
    TransactionComponent,
    // Other components, directives, or pipes in your module
  ],
  imports: [
    BrowserModule,
    // Add other required modules like FormsModule, HttpClientModule here
  ],
  bootstrap: [TransactionComponent] // Or your app's root component
})
export class AppModule { }

Step 4: Confirm Your Template Usage #

Your existing template code in transaction.component.html is perfectly fine—just make sure the pipe reference stays as-is:

<tr *ngFor="let dat of result | reverse | filter:filterdata| paginate: { itemsPerPage: 5, currentPage: p };let i = index ">
  <!-- Your table cell content here -->
</tr>

Why This Fix Works #

When you originally embedded the pipe in your component class, Angular might have picked it up temporarily during initial compilation. But once the app reloaded or changed, it couldn't properly resolve the pipe as a standalone provider. By separating the pipe into its own class and declaring it in the module, Angular can consistently recognize and use it across your app.

内容的提问来源于stack exchange，提问作者user9630712