I have a list in angular, an array. OnInit it gets filled from the right corresponding database items. I created a form above it. When you enter something in the form, it acts like a filter. This works, the first time. When you erase something from the form and enter something else, the list should be refreshed and afterwards filtered based on the new input. This doesn't happen. I put the formula that happens on onInit in my function to refill the list.

Below you can find my function (I left the console logs in) and a screenshot of the problem. First I look for a user ([email protected]) which returns three results. Than I erase the user and look based on a month 7. The screen returns a new unfilterd list while in the console it still holds the list of 3 x user [email protected]. So there is an inconsistency to. If you look at screen result you would think of a filter problem, the console points at a refreshproblem.

if more code is required let me know.

  updateWithFilter(): void {
    console.log("function update filter reached")
       console.log(this.listadapted);
    if(this.listadapted == true){
     // this.timesheetsHandled = {} as TimeSheet[];
     this.getHandledSheet();
      console.log("getHandledSheet executed")
    }

    if(this.filterUsername.trim() && !this.filterYear && !this.filterMonth){
      console.log("option 1 reached")
      console.log(this.filterUsername.trim());
      console.log(this.filterYear);
      console.log(this.filterMonth);
          this.timesheetsHandled = this.timesheetsHandled.filter(sheet => sheet.username == this.filterUsername);
          this.listadapted = true;

    } else if(!this.filterUsername.trim() && !this.filterYear && this.filterMonth){
      console.log("option 2 reached");
      console.log(this.filterUsername.trim());
      console.log(this.filterYear);
      console.log(this.filterMonth);

      console.log("before filter");
      this.timesheetsHandled.forEach(sheet => console.log(sheet.username));
          this.timesheetsHandled = this.timesheetsHandled.filter(sheet => sheet.month == this.filterMonth);
          console.log("after filter");
          this.timesheetsHandled.forEach(sheet => console.log(sheet.username));
         // console.log(this.timesheetsHandled.filter(sheet => sheet.month == this.filterMonth));
          this.listadapted = true;

    } else if .. more options

}


  ngOnInit(): void {
    this.getHandledSheet();
  }



  getHandledSheet(): void {
    this.timesheetService.getAllTimesheets().subscribe({next: (response: TimeSheet[]) => {this.timesheetsHandled = response.filter(sheet => sheet.status == 'HANDLED') }}) ;
  }

CodePudding user response：

My guess would be that this is caused by loading data in ngOnInit. As the documentation (https://angular.io/api/core/OnInit) states : [...] It is invoked only once when the directive is instantiated.

I suspect that you create one instance and re-use it and the ngOnInit method does not get called again.

UPDATE: The issue is that the call to this.getHandledSheet(); does a call to .. .subscribe({next: .. which is delayed and the rest of the function is executed first. So the actual code after next: is only executed after the timeSheetService is done loading the data.

So either you apply the filter in the
{next: (response: TimeSheet[]) => {this.timesheetsHandled = response.filter(sheet => sheet.status == 'HANDLED') }}
block after filtering for 'HANDLED' or you'll try to await in the update function.

CodePudding user response：

Create two variables, one that will always remain unfiltered, then another that will be filtered.

The problem will be that the original list is filtered, hence you are losing the original data after filtering!

timesheetHandled: TimeSheet[];
timesheetHandledOriginal: TimeSheet[];

updateWithFilter(): void {
    console.log('function update filter reached');
    console.log(this.listadapted);
    if (this.listadapted == true) {
        // this.timesheetsHandled = {} as TimeSheet[];
        this.getHandledSheet();
        console.log('getHandledSheet executed');
    }

    if (this.filterUsername.trim() && !this.filterYear && !this.filterMonth) {
        console.log('option 1 reached');
        console.log(this.filterUsername.trim());
        console.log(this.filterYear);
        console.log(this.filterMonth);
        this.timesheetsHandled = this.timesheetHandledOriginal.filter(
            sheet => sheet.username == this.filterUsername
        );
        this.listadapted = true;
    } else if (!this.filterUsername.trim() && !this.filterYear && this.filterMonth) {
        console.log('option 2 reached');
        console.log(this.filterUsername.trim());
        console.log(this.filterYear);
        console.log(this.filterMonth);

        console.log('before filter');
        this.timesheetsHandled.forEach(sheet => console.log(sheet.username));
        this.timesheetsHandled = this.timesheetHandledOriginal.filter(
            sheet => sheet.month == this.filterMonth
        );
        console.log('after filter');
        this.timesheetsHandled.forEach(sheet => console.log(sheet.username));
        // console.log(this.timesheetsHandled.filter(sheet => sheet.month == this.filterMonth));
        this.listadapted = true;
    }
    // else if .. more options
}

ngOnInit(): void {
    this.getHandledSheet();
}

getHandledSheet(): void {
    this.timesheetService.getAllTimesheets().subscribe({
        next: (response: TimeSheet[]) => {
            this.timesheetsHandled = response.filter(sheet => sheet.status == 'HANDLED');
            this.timesheetHandledOriginal = JSON.parse(JSON.stringify(this.timesheetsHandled));
        },
    });
}

CodePudding user response：

How about you first go and read the documentation.