错误:无法读取未定义(读取‘Angular12’)管道的属性

// my.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myPipe'
})
export class MyPipe implements PipeTransform {
  transform(value: any): any {
    return value ? value.key : '';
  }
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyPipe } from './my.pipe';

@NgModule({
  declarations: [AppComponent, MyPipe],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div *ngIf="myData">{{ myData | myPipe }}</div>`
})
export class AppComponent {
  myData: any;

  ngOnInit() {
    // 模拟异步数据获取
    setTimeout(() => {
      this.myData = { key: 'value' };
    }, 1000);
  }
}