错误：InvalidPipeArgument：管道“AsyncPipe”

Question

我发现了几个具有相同标题的问题，据我所知，其中一些问题表明解决方案基本上是返回一个 Observable 而不是一个数组（其他问题是关于 FireBase 的，这不是我的情况）。好吧，就我而言，下面的代码确实返回一个 Observable （查看“getServerSentEvent(): Observable {return Observable.create ...”）

我的最终目标是获取从 Rest WebFlux 返回的流中的所有事件。我没有通过后端，因为我很确定这个问题与 Angular 中的一些错误有关。

最重要的是，我可以调试并查看事件是否正确地从 app.component.ts 传送到 extratos$（参见下图）。

整条日志

core.js:6185 ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

    at invalidPipeArgumentError (common.js:5743)

    at AsyncPipe._selectStrategy (common.js:5920)

    at AsyncPipe._subscribe (common.js:5901)

    at AsyncPipe.transform (common.js:5879)

    at Module.ɵɵpipeBind1 (core.js:36653)

    at AppComponent_Template (app.component.html:8)

    at executeTemplate (core.js:11949)

    at refreshView (core.js:11796)

    at refreshComponent (core.js:13229)

    at refreshChildComponents (core.js:11527)

应用程序组件.ts

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

import { AppService } from './app.service';

import { SseService } from './sse.service';

import { Extrato } from './extrato';

import { Observable } from 'rxjs';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  providers: [SseService],

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  //extratos: any;

  extratos$ : Observable<any>;

  constructor(private appService: AppService, private sseService: SseService) { }

  ngOnInit() {

    this.getExtratoStream();

  }

  getExtratoStream(): void {

    this.sseService

      .getServerSentEvent("http://localhost:8080/extrato")

      .subscribe(

        data => {

          this.extratos$ = data;

        }

      );

  }

}

Answer 1

当您编写此内容时observer.next(this.extratos);，这意味着您在回调的参数this.extratos中在组件端得到的内容，因此当您这样做时，您实际上是在存储.&nbsp;TypeScript 不会抱怨这一点，可能是因为当您像您一样从头开始构建时，它不够智能来推断类型。datathis.extratos$ = data;extratos&nbsp;ArrayObservable尝试这个：this.extratos$&nbsp;=&nbsp;this.sseService &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.getServerSentEvent("http://localhost:8080/extrato");并在模板中：<div *ngFor="let ext of extratos$ | async">