如何将反向管道添加到使用 Observable 的 *ngFor ？

Question

我有一个 Ionic 应用程序，在添加到集合时使用 firestore 和 AngularFire 自动 ID。我想抓住 firestore 集合并颠倒顺序。我认为我的管道正确，但收到错误 NG8004：找不到名称为“reverse”的管道。

我的管道是否正确？如何将管道添加到页面

HTML

<ion-content>
  <div *ngFor="let message of (messageList | async | reverse)" >
    Name {{message.name}}
  </div>

或者没有可观察的简化列表也会失败。

<ion-list>
  <ion-item *ngFor="let test of list | reverse">
    <ion-label>
      <h3>{{test.name}}</h3>
    </ion-label>
  </ion-item>
</ion-list>


list = [
  {name: "Tom"},
  {name: "Dick"},
  {name: "Harry"}
]

反向.pipe.ts

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: any) {
  if (!value) return;
  return value.reverse();
 }
}

app.module.ts

import { ReversePipe } from './reverse.pipe';

@NgModule({
  declarations: [AppComponent, ReversePipe],
  imports: [BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule, 
    provideFirebaseApp(() => initializeApp(environment.firebase)),  
    provideAuth(() => getAuth()), 
    provideFirestore(() => getFirestore()), 
    provideStorage(() => getStorage())
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

.ts 页面文件

 import { ReversePipe } from '../../reverse.pipe';

 export class UnitLogsPage {
   reverse: ReversePipe;

Answer 1

为了让管道正常工作，我首先必须编辑reverse.pipe.ts以包含standalone: true

从 '@angular/core' 导入 { Pipe, PipeTransform };

@Pipe({
 name: 'reverse',
 standalone: true
})
export class ReversePipe implements PipeTransform {

  transform(value: any) {
    if (!value) return;
    return value.reverse();
  }
}

删除 app.module.ts 中的引用。然后添加到page.module中

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { UnitLogsPageRoutingModule } from './unit-logs-routing.module';
import { UnitLogsPage } from './unit-logs.page';
import { ReversePipe } from '../../reverse.pipe';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ReversePipe,
    UnitLogsPageRoutingModule
  ],
  declarations: [UnitLogsPage]
})
export class UnitLogsPageModule {

}