离子阵列过滤器不过滤

Question

I have a list of items in an array. Each element in the array contains the following:

id
date
status
name
description

I am trying to create a second array which will contain all the elements from the first array where the status = 'pending'.

I am executing the following code in my home.ts file:

showPending(){
    this.pendingItems = this.items;
    this.pendingItems.filter((item) => {return item.status === 'pending'});
    this.navCtrl.push(ShowPendingPage, {
    pendingItems: this.pendingItems      
    });
  }

When I run my application, I add 3 elements into the items array. 2 elements have a status of pending and 1 has a status of complete. When I execute the above code, the ShowPendingPage gets pushed. I execute this code in the ShowPendingPage.ts file:

this.passedArray = this.navParams.get('pendingItems')

and I execute the following in my ShowPendingPage.html:

  <ion-content>
  <ion-list>
      <ion-item-sliding *ngFor="let item of passedArray">
        <ion-item [ngClass]="item.status">
            {{item.name}} - Added {{item.date}}
        </ion-item>  
        <ion-item-options side="right">
          <button ion-button color="light" (click)="viewItem(item)">View</button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
  </ion-content>

The resulting array contains all 3 elements of the original array. It should only contain 2 elements, the two where I set the status to pending.

Anybody with better eyes than me that can see what I am missing?

Answer 1

Array.prototype.filter creates a new array with the filtered elements and is not in place .

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Also

filter() does not mutate the array on which it is called.

You just have to set it to your variable.

this.pendingItems = this.pendingItems.filter((item) => {return item.status === 'pending'});