离子阵列滤波器不会过滤

时间:2018-05-25 00:10:24

标签: javascript arrays ionic-framework

我有一个数组中的项目列表。数组中的每个元素都包含以下内容:

id
date
status
name
description

我正在尝试创建第二个数组,其中包含第一个数组中status ='pending'的所有元素。

我在home.ts文件中执行以下代码:

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

当我运行我的应用程序时,我在items数组中添加了3个元素。 2个元素的状态为pending,1个状态为complete。当我执行上面的代码时,ShowPendingPage被推送。我在ShowPendingPage.ts文件中执行此代码:

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

我在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>

结果数组包含原始数组的所有3个元素。它应该只包含2个元素,即我将状态设置为待处理的两个元素。

任何一个眼睛都比我好的人能看到我所缺少的东西吗?

1 个答案:

答案 0 :(得分:3)

Array.prototype.filter使用已过滤的元素创建一个新数组,而不是就位

  

filter()方法创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。

另外

  

filter()不会改变调用它的数组。

您只需将其设置为您的变量即可。

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