如何在角度 httpclient 中实现异步管道？

Question

我试图根据将通过 HTTP get 调用检索的数据加载子组件。我正在使用服务来执行 HTTP 调用并订阅组件的构造函数。但是 ngif 在数据检索之前调用。

所以我在 ngif 中应用了异步管道，但它触发了另一个错误。

服务代码：

GetContest(id){
    return this.http.get(this.baseurl+id);
}

组件的构造函数：

this.service.GetContest(this.route.snapshot.paramMap.get('id')).
    subscribe( (res)=> {
      this.contest = res;
      console.log(this.contest);
    });

模板 ngif：

<app-beforecontest *ngIf="contest.startTime<date "></app- 
beforecontest>

以上代码产生错误：

TypeError: Cannot read property 'startTime' of null

在此之后我像这样加入了异步管道：

<app-beforecontest *ngIf="(contest|async).startTime<date "></app- 
beforecontest>

它正在生成错误：

ContestComponent.html:1 ERROR Error: InvalidPipeArgument: '[object 
Object]' for pipe 'AsyncPipe'
at invalidPipeArgumentError

Answer 1

你可以在你的component.ts中设置this.contest的初始值为null

this.contest = null

并在模板中像这样检查它：

<app-beforecontest *ngIf="contest?.startTime < date"></app- 
beforecontest>

@jonrsharpe 感谢您清除此问题

请注意，startTime<date "> 是一个非常奇怪的字符串，我不知道你的意思。

一般来说，如果你想使用异步管道，你应该在 Observable 上使用它：

myObservable$ = this.service.GetContest(this.route.snapshot.paramMap.get('id'));

如您所见，我们没有 .subscribe 处理它（！！！）

在模板中首先异步observable，然后添加.startTime

<app-beforecontest *ngIf="(myObservable$ | async).startTime < date"></app-beforecontest>

Answer 2

异步管道需要用于可观察对象，我创建了一个简单的 stackblitz 来展示它：https://stackblitz.com/edit/angular-tx7g36

您需要更改的主要代码在组件本身中

import { Component } from '@angular/core';
import {ContestService} from './contest.service';
import {Observable} from 'rxjs';

@Component({
  selector: 'my-app',
  template: `
    <h1>Contest startTime</h1>
    <p>{{(contest$ | async)?.startTime}}</p>
  `,
})
export class AppComponent  {
  contest$: Observable<any>;

  constructor(private contestService: ContestService) {
    this.contest$ = this.contestService.getContest();
  }
}

如果您对比赛属性末尾的 $ 感到疑惑，那是一种区分 observable 与其他类型数据的符号。

Answer 3

在处理异步响应和绑定模板的情况下，您可以像这样使用安全导航运算符 -

<app-beforecontest *ngIf="contest?.startTime<date "></app- 
beforecontest>

否则，如果你想使用异步管道，你必须像下面的 mannet 一样使用它 -

<app-beforecontest *ngIf="contest.startTime | async"></app-beforecontest>

PS：但是在您的情况下，contest 本质上不是 asnyc，您只是将其分配给来自异步请求的值。所以最好使用安全导航算子?。