Wie füge ich Artikel zu einem Observable hinzu

Question

Ich habe 5000 Protokolleinträge in meiner Datenbank und zu einer Zeit lade ich nur 50 und ich habe eine Schaltfläche "Mehr laden", die dann 51-100, 101-150 dh in Batches laden sollte in 50 Aufzeichnungen.

Wie ich gelesen habe, kann dies nicht über Observable getan werden. Also ich versuche Thema zu verwenden, und ich habe infact das Problem gelöst, aber ich weiß nicht, ob es der richtige Weg ist, da ich in RxJS bin sehr neu und würden uns über Ihre Richtlinien

Hier ist meine Komponente:

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); 

    } 

} 

Hier ist meine Komponente html, die für Schleife auf Betreff verwendet:

<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

um eine Art von Zustand innerhalb eines beobachtbaren Strom zu speichern, können Sie scan() verwenden. Zum Beispiel:

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>