How to reset BehaviorSuject values for msInfiniteScroll?

Question

I copied Haidar's example here (how to use scroll event in angular material mat select?), to make an infinite scroll for an application. I works as expected, infinite scroll calls getNextBatch() function to obtain the next values. But, I need to reset this values when an user clicks a button, or another event.

I'm using angular 6, this is my code:

This is my html:

<mat-select msInfiniteScroll (infiniteScroll)="getNextBatch()" placeholder="Select..." [complete]="offset === array.length"
      (selectionChange)="setValues($event.value)">
      <mat-option [value]="-1"> None</mat-option>
        <mat-option *ngFor="let option of options$ | async" [value]="option.ID">
          {{option.ID}}
        </mat-option>
</mat-select>

My js file is:

limit = 10;
offset = 0;
options = new BehaviorSubject<VListaDocAttachEntity[]>([]);
options$: Observable<VListaDocAttachEntity[]>;
constructor(){
this.options$ = this.options.asObservable().pipe(
  scan((acc, curr) => {
    return [...acc, ...curr];
  }, [])
);
}
getNextBatch(noAdvance?: string) {
var result = [];
if (!noAdvance) {//this is the original behavior
  result = this.docNums.slice(this.offset, this.offset + this.limit);
  this.offset += this.limit;
} else { // this is the optional behavior
  var cnt: number = 0;
  for (var i = 0; i < this.docNums.length; i++) {
    this.documento.forEach(element => {
     if(this.docNums[i].Doc == element.DocNum){
        cnt++
      }
    });
    if (cnt == 0) {
      result.push(this.docNums[i]);
    }else{
      cnt =0;
    }
  }
}

this.options.next(result);//this appends to the list more elements
}

When I use the optional behavior, I create a new list from the original list, removing elements that I already selected, and want to replace in my mat-select the previous values, with the new filtered ones.

But the only method is next() and that appends more elements. So what I want is to reset those values, and append the new list. Is there a way to do this?

score 1 · Accepted Answer · answered Aug 20 '19 at 21:39

What appends more elements is not next but the scan operator. One possible solution is to remove the scan and do the appending inside getNextBatch by accessing the BehaviourSubject's value property, like this:

limit = 10;
offset = 0;
options = new BehaviorSubject<VListaDocAttachEntity[]>([]);
options$: Observable<VListaDocAttachEntity[]>;
constructor(){
// CHANGED
this.options$ = this.options.asObservable();
}
getNextBatch(noAdvance?: string) {
var result = [];
if (!noAdvance) {//this is the original behavior
  // CHANGED
  result = [...this.options.value, ...this.docNums.slice(this.offset, this.offset + this.limit)];
  this.offset += this.limit;
} else { // this is the optional behavior
  var cnt: number = 0;
  for (var i = 0; i < this.docNums.length; i++) {
    this.documento.forEach(element => {
     if(this.docNums[i].Doc == element.DocNum){
        cnt++
      }
    });
    if (cnt == 0) {
      result.push(this.docNums[i]);
    }else{
      cnt =0;
    }
  }
}

this.options.next(result);
}

How to reset BehaviorSuject values for msInfiniteScroll?

1 Answers1