javascript - 如何将项目附加到 Observable

Question

我的数据库中有 5000 个日志条目，一次只加载 50 个，并且我有一个“加载更多”按钮，然后应该加载 51-100、101-150，即批量加载 50 条记录。

据我所知，这不能通过 Observable 来完成。所以我正在尝试使用主题，事实上我已经解决了这个问题，但我不知道这是否是正确的方法，因为我对 RxJS 很陌生，并且非常感谢您的指导

这是我的组件:

export class ControllerLogComponent implements OnInit {

    @Input() controller: Controller;
    logEntries: Log[] = [];
    loadMoreCount: BehaviorSubject<number> = new BehaviorSubject<number>(0);
    allLogEntries: Subject<Log[]> = new Subject<Log[]>();
    skip: number = 0;
    max: number = 50; //temp

    constructor(private translate: TranslateService, private controllerService: ControllerService, private _toast: NotificationsService) { }

    ngOnInit() {
        this.controllerService.getLog(this.controller.remoteID, this.skip, this.max).subscribe(a => {
            this.logEntries = this.logEntries.concat(a);
            this.allLogEntries.next(this.logEntries);
            this.loadMoreCount.next(a.length);            
        });
    }

    public loadMore() {
        this.skip += this.max;
        this.controllerService.getLog(this.controller.remoteID, this.skip, this.max).subscribe(a => {
            this.logEntries = this.logEntries.concat(a);
            this.loadMoreCount.next(a.length);
            this.allLogEntries.next(this.logEntries);
        });
    }

      private handleError(error: any) {
        console.log("error: " + error);

    }

}

这是我的组件 html，它在主题上使用 for 循环:

<tbody *ngIf="allLogEntries">
            <tr *ngFor="let log of allLogEntries | async">
                <td>
                    <i class="fa fa-toggle-off" aria-hidden="true" *ngIf="log.type==0"></i>
                    <i class="fa fa-toggle-on" aria-hidden="true" *ngIf="log.type==1"></i>
                    <i class="fa fa-info-circle" aria-hidden="true" *ngIf="log.type==2"></i>
                    <i class="fa fa-info-circle" aria-hidden="true" *ngIf="log.type==3"></i>
                    <i class="fa fa-exclamation-circle" aria-hidden="true" *ngIf="log.type>3"></i>

                </td>
                <td>{{ log.logged | date:'medium' }}</td>
                <td>{{ log.logentry }}</td>
            </tr>
        </tbody>

Answer 1

为了在可观察流中存储某种状态，您可以使用scan()。例如:

Rx.Observable
  .fromEvent(document.getElementById('more'), 'click')
  .map(() => [1,2,3])
  .scan((list, items) => list.concat(items), [])
  .subscribe(x => console.log(x));

<script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script>
<button id="more">load more</button>