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（!!!）

，并在模板中首先使可观察对象异步，然后添加.startTime

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

Answer 2

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

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

如果您想知道竞赛属性结尾处的E2，请使用此符号区分可观察的数据和其他类型的数据。

Answer 3

在处理异步响应并绑定模板的情况下，您也可以使用安全的导航操作符-

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

否则，如果要使用异步管道，则必须像在mannet中一样使用它-

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

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

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

3 个答案: