Как добавить массив Observable к существующему массиву, используемому через угловые асинхронные каналы?

Question

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

Мой пример ниже технически работает, но он сбрасывает исходную наблюдаемую, обновляя все элементы вэкран, а не просто добавление новых.Мысли?Могут ли субъекты помочь с этим?

private onViewMoreClicked(): void {
    this.pageOffset += this.pageLimit;

    const moreItems$ = this.itemService.get(
        this.pageLimit,
        this.pageOffset
    );

    this.items$ = forkJoin(this.items$, moreItems$).pipe(
        map(([a, b]) => [...a, ...b])
    );

Answer 1

Может быть, попробовать что-то вроде это или это ...

Настройка в on-init ...

ngOnInit() {
   this.pageOffset = 0;

    this.items$ = this.nextPage$.pipe(
        // load first batch when Angular async pipe subscribes
        startWith(this.pageOffset),
        // switch observable to output of getMessages
        switchMap(offset => this.itemService.get(
            this.pageLimit,
            offset
        )),
        // add newly-emitted batch to previously-emitted items
        scan((acc, curr) => {
            acc.push(...curr);
            return acc;
        }, [])
    );
}

И это должно быть больше обработчик кликов…

private onViewMoreClicked(): void {
   this.pageOffset += this.pageLimit;

   // load new items into message$  
    this.nextPage$.next(this.pageOffset);
}

Answer 2

С кодом, который у вас есть прямо сейчас, я думаю, вы могли бы изменить свой forkJoin на этот

this.items$ = [...this.items$, ...moreItems$];

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

this.itemService(this.pageLimit, this.pageOffset).subscribe(res => {
    this.items$ = [...this.items$, ...res];
});