Как реализовать асинхронный канал в угловом httpclient? - PullRequest
Новая
       53

Как реализовать асинхронный канал в угловом httpclient?

0 голосов
/ 18 октября 2019

Я пытался загрузить дочерний компонент на основе данных, которые будут получены по 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);
    });

template 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

Ответы [ 3 ]

0 голосов
/ 18 октября 2019

Вы можете установить начальное значение this.contest в null в вашем component.ts 

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>
0 голосов
/ 18 октября 2019

Асинхронный канал должен использоваться на наблюдаемой, я создал простой стековый блик, чтобы показать его: 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();
  }
}

В случае, если вам интересно узнать о $ в конце свойства контеста, это обозначение, позволяющее отличить наблюдаемые от других типов данных.

0 голосов
/ 18 октября 2019

В случае обработки асинхронного ответа и привязки шаблона, вы можете использовать безопасный оператор навигации, например: - 

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

В противном случае, если вы хотите использовать асинхронный канал, вы должны использовать его, как показано ниже mannet- 

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

PS: Но здесь, в вашем случае contest не имеет асинхронного характера, вы просто присваиваете его значению, которое приходит из асинхронного запроса. Так что лучше использовать оператор безопасной навигации ?.

...