Angular - 如何将单个对象<T> 放入 BehaviorSubject<T[]>答案

【问题标题】：Angular - How to put one single object<T> in a BehaviorSubject<T[]>Angular - 如何将单个对象<T> 放入 BehaviorSubject<T[]>
【发布时间】：2021-07-15 13:54:10
【问题描述】：

我有一个由BehaviorSubject<Sequence[]> 填充的数据表，它是这样工作的：

//sequencesService

findSequences(pageIndex: number, pageSize: number, rrc: string, datiForm: FormComponent): Observable<PaginatedResult>{
    return this.http.get<PaginatedResult>('https://bgpie.net/api/rrc/' + rrc + '/sequence', { params});
    }

//dataSource
export class SequencesDataSource implements DataSource<Sequence> {

    private sequencesSubject = new BehaviorSubject<Sequence[]>([]);

    private loadingSubject = new BehaviorSubject<boolean>(false);

    public loading$ = this.loadingSubject.asObservable();

    public length = new BehaviorSubject<number>(0);

loadSequences(pageIndex: number,
                  pageSize: number,
                  rrc: string,
                  datiForm: FormComponent) {

        this.loadingSubject.next(true);

        this.sequencesService.findSequences(pageIndex, pageSize, rrc, datiForm).pipe(
                finalize(() => this.loadingSubject.next(false)),
                tap(x => this.length.next(x.total))
            )
            .subscribe((sequences: PaginatedResult) => {
            this.sequencesSubject.next(sequences.items);
        });}
    }

//PaginatedResult
export interface PaginatedResult{
  readonly items: Sequence[];
  readonly total: number;
}

我希望能够使用序列 ID 作为标准来过滤表格。这意味着只需要显示一个序列。虽然 findSequences 方法调用包含序列数组的 API，但下面的方法调用具有单个序列的 API，它应该是：

getSequence(id: string): Observable<Sequence> {
        return this.http.get<Sequence>('https://bgpie.net/api/sequence/' + id);
    }

问题是我不能使用Sequence 类型的可观察对象来填充BehaviorSubject<Sequence[]>。我尝试返回一个 Sequence[] 类型的 observable（如下面的代码），然后订阅它，但它不起作用。

//sequencesService
getSequenceFilter(id: string): Observable<Sequence[]> {
        return this.http.get<Sequence[]>('https://bgpie.net/api/sequence/' + id);
    }

//dataSource
loadSequence(datiForm: FormComponent){
        this.loadingSubject.next(true);

        this.sequencesService.getSequenceFilter(datiForm.sequenceId).pipe(
            finalize(() => this.loadingSubject.next(false)),
            finalize(() => this.length.next(1))
        )
        .subscribe((sequence: Sequence[]) => this.sequencesSubject.next(sequence))

【问题讨论】：

让getSequence(id: string) 返回Observable<Sequence> 并在loadSequence 方法中更改为.pipe(......., map(sequence => [sequence]), tap(sequence => this.sequencesSubject.next(sequence))).subscribe()
感谢它有效，如果您发布答案，我可以将其标记为解决方案
很高兴听到。我已经做了。谢谢:-)

标签： html angular api http rxjs

【解决方案1】：

进行以下简单更改：

有getSequence(id: string)返回Observable<Sequence>
在loadSequence 方法中更改为.pipe(......., map(sequence => [sequence]), tap(sequence => this.sequencesSubject.next(sequence))).subscribe()

【讨论】：

【解决方案2】：

您可以将下一个唯一序列实例作为数组

this.sequencesSubject.next([sequence])

而不是单个对象

this.sequencesSubject.next(sequence)

全功能修改

loadSequence(datiForm: FormComponent){
        this.loadingSubject.next(true);

        this.sequencesService.getSequenceFilter(datiForm.sequenceId).pipe(
            finalize(() => this.loadingSubject.next(false)),
            finalize(() => this.length.next(1))
        )
        .subscribe((sequence: Sequence) => this.sequencesSubject.next([sequence]))

【讨论】：