Typescript 在数据加载后，如何使用NgFor在使用异步管道的可观测对象上生成子组件

我不确定您的确切代码是什么，但您可以在这里看到一个有效的示例:

interface Item {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

type Items = Item[];

@Injectable({ providedIn: 'root' })
class DataService {
  private http = inject(HttpClient);

  getData() {
    return this.http.get<Items>(`https://jsonplaceholder.typicode.com/todos`);
  }
}

@Component({
  selector: 'app-child',
  standalone: true,
  template: `
    <pre>{{item() | json}}</pre>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [JsonPipe],
})
export class ChildComponent {
  item = input<Item>();
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <app-child *ngFor="let data of (data$ | async)" [item]="data"></app-child>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ChildComponent, NgFor, AsyncPipe],
})
export class App {
  name = 'Angular';

  private dataService = inject(DataService);

  data$ = this.dataService.getData().pipe(startWith([]), share());
}

bootstrapApplication(App, { providers: [provideHttpClient()] });

Seestackblitz