InvalidPipeArgument： '[object Object]' for pipe 'AsyncPipe' with my code

Question

我正在学习Angular，我面临着无效的Pipeargument的问题：'[对象对象]'for Pipe'asyncpipe'。

html代码

<div *ngIf="id$ | async">
      ....
      </div>

TS代码

 id$: any;
  uid: string;

  ngOnInit() {
    this.id$ = this.route.paramMap.pipe(
      map((paramMap: ParamMap) => paramMap.get(UID_PARAM)),
      filter((uid: string) => !!uid),
      tap((uid) => {
        this.uid = uid;
      })).subscribe(() => {
        this.getData();
      });
  }

getData() {
     this.restAPI.getDetails(this.uid)
    .subscribe((response: ApiResponse) => {
      console.log(response.data);
      }, (err) => {
          console.log(err);
      });
    }

这里的Apiresponse是一个模型。

错误：invalidpipeargument：'[对象对象]'for Pipe'asyncpipe'

Answer 1

您的this.id$是不可观察的 - 这是订阅。异步管期望可观察到。尝试

this.id$ = this.route.paramMap.pipe(
  map((paramMap: ParamMap) => paramMap.get(UID_PARAM)),
  filter((uid: string) => !!uid)
);
this.id$.subscribe(id => {
    this.uid = id;
    this.getData();
  });

Answer 2

如果您的 getData() 方法未返回 Observable 您无法使用 async pipe。如果它不返回 Observable remove async 管道或否则请按以下方式更改代码。

ts

  ngOnInit() {
    this.id$ = this.route.paramMap.pipe(
      map((paramMap: ParamMap) => paramMap.get(UID_PARAM)),
      filter((uid: string) => !!uid),
      tap((uid) => {
        return this.uid = uid;
      }));
    if (this.id$) {
        this.getData();
    }  
  }

html

<div *ngIf="id$ | async">
...
</div>