如何将 ReplaySubject 发出的值传递给 Observable<string[]> 中的数组？

Question

大家。 我正在开发 Angular 应用程序并使用 ReplaySubject 进行查询词搜索。我想使用可观察的异步方法。 我的服务：

export class StateService {

  private busca$Subject: ReplaySubject<string>;
  public busca$: Observable<string>; 

  constructor() { }

  public subjectNewValue(value: string){
    this.busca$Subject.next(value);
  }

  public getBuscaObservable(): Observable<string> {
    return this.busca$;
  }

}

我的表单组件：

export class FormularioBuscaComponent implements OnInit {

  public formulario: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private stateService: StateService) { }

  ngOnInit(): void {
    this.formulario = this.formBuilder.group({
      nome:['', Validators.required]
    });
  }

  public submit(): void {
    if(this.formulario.valid){
     this.sendData(this.formulario.get('nome').value); 
    }
  }

  public sendData(query: string): void {
    query = query.trim().replace(' ', '+');
    this.stateService.subjectNewValue(query);
  }

}

在组件上，我想显示 ReplaySubject 的所有值，我正在尝试使用 RxJS 的 toArray() 运算符，但它不起作用：

export class HistoricoBuscaComponent implements OnInit {

  public historico$: Observable<string[]>;
  constructor(private stateService: StateService, private router: Router) { }

  ngOnInit(): void {
    this.historico$ = this.getBuscaObservable().pipe(toArray());
  }
}

并在模板上订阅 observable historico$：

<ul class="list-group">
    <li *ngFor="let item of historico$ | async" class="list-group-item list-group-item-action">
        {{ item }}
    </li>
</ul>

如何解决我的问题？ 谢谢！

Answer 1

在您的 StateService 中，您应该绑定 busca$ 和 busca$Subject：

我的意思是：

export class StateService {

  private busca$Subject: ReplaySubject<string> = new ReplaySubject(3); // you can change 3
  private busca$: Observable<string> = busca$Subject.asObservable(); // change this line

  constructor() { }

  public subjectNewValue(value: string){
    this.busca$Subject.next(value);
  }

  public getBuscaObservable(): Observable<string> {
    return this.busca$;
  }

}