Доступ к возвращаемому объекту из наблюдаемого «синхронно» - PullRequest
Новая
       6

Доступ к возвращаемому объекту из наблюдаемого «синхронно»

0 голосов
/ 21 ноября 2018

Есть ли способ напрямую получить доступ к «полезной нагрузке» наблюдаемой и разрешить ее позже, а не подписываться?

Например, я знаю, что мы можем сделать это .. 

export class RecordService
{
   fetchRecordFromServer():Observable<Record>
   {
       return http.get().pipe(map(result => return new Record())); // equivalent
   }  
}


export class MyComponent
{
  public record:Record = null;
  constructor(private recordService:RecordService) 
  {
     this.userService.fetchRecordFromServer().subscribe( record => 
     {
        this.record = record;
     }); 
  }
  getRecordName():string
  {
     return this.record? this.record.name || "";
  }
}

Мне было просто интересно, существует ли сокращенный способ сделать что-то подобное 

export class MyComponent
{
  public record:Observable<Record>;
  constructor(private recordService:RecordService) 
  {
     this.record = this.userService.fetchRecordFromServer();
  }

  getRecordName():string
  {
     return this.record? this.record.name || "";
  }

}

Я не совсем уверен, что я спрашиваю, но я думаю, что я послеидея о том, что значение может быть присвоено из Observable типа, и оно будет разрешаться при срабатывании Observable, и его можно рассматривать, как если бы оно было экземпляром всех времен.

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

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

В шаблоне можно использовать канал async, чтобы не использовать подписку внутри компонента. 

export class MyComponent
{
    public record$: Observable<Record>;
    constructor(private recordService:RecordService) 
    {
        this.record$ = this.userService.fetchRecordFromServer();
    }

    getRecordName(record: Record):string
    {
        return record ? record.name : "";
    }
}

В шаблоне 

   <h1>{{getRecordName(records$ | async)}}</h1>
0 голосов
/ 21 ноября 2018

Я думаю, что с помощью кода, который вы добавили, вы пытаетесь связать пользовательский интерфейс напрямую с горячей наблюдаемой.Для этого можно использовать асинхронный канал: https://angular.io/api/common/AsyncPipe

Из документации : 

import { Component } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map, take } from 'rxjs/operators';

@Component({
  selector: 'app-hero-message',
  template: `
      <h2>Async Hero Message and AsyncPipe</h2>
	    <p>Message: {{ message$ | async }}</p>
	    <button (click)="resend()">Resend</button>`,
})
export class HeroAsyncMessageComponent {
  message$: Observable < string > ;

  private messages = [
    'You are my hero!',
    'You are the best hero!',
    'Will you be my hero?'
  ];

  constructor() {
    this.resend();
  }

  resend() {
    this.message$ = interval(500).pipe(
      map(i => this.messages[i]),
      take(this.messages.length)
    );
  }
}
...