angular - ionic 清除数据

标签 angular typescript ionic-framework

我正在使用 ion-select 来选择选项并过滤它,但问题是当我选择一个选项时它的过滤很好但是当我第二次选择它的过滤数据来自第一个过滤器结果而不是来自实际数据

<ion-item >
     <ion-label style="text-align: right;" dir="rtl" >קטגוריה</ion-label>
        <ion-select dir="rtl" [(ngModel)]="selectedOption" (ionChange)="print()">
           <ion-option *ngFor="let categ of cat2" dir="rtl" [value]="categ.id"  >{{categ.title}}</ion-option>
        </ion-select>
</ion-item> 

print() {

   console.log(this.selectedOption);
   this.data = this.data.filter(category => category.categories[0].id === this.selectedOption);

}

这只是示例数据

{
{
"title": "111"
"category": "252"
},
{
"title": "111"
"category": "242"
},
{
"title": "111"
"category": "212"
},
{
"title": "111"
"category": "232"
}
}

当我选择 232 类别时,它显示 1 个数组,因为在数据中只有 1 个数组具有类别 232。但是第二次,如果我单击 212,它什么也没有显示,但数据中存在值(value)。它过滤第一个过滤数据。

有什么办法可以解决这个问题吗?我知道问题是当我选择第一个值时数据发生了变化。当我选择第二个值时,我需要它会从以前的数据中过滤,而不是从第一个过滤器中过滤。

最佳答案

您正在过滤数组并将其分配回同一个数组,因此您正在尝试重新过滤已过滤的数组。过滤时应该使用辅助数组:

filteredData = [];

// ....

print() {
  this.filteredData = this.data.filter(category => category.categories[0].id === this.selectedOption);
}

然后使用辅助数组显示过滤后的值。

关于angular - ionic 清除数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57840371/

相关文章:

javascript - 子组件的 EventEmitter 不工作

javascript - 如何链接一个期望来自 Observable 的参数值的 Promise?

Angular 2 rxjs switchmap 返回 Observable<Object>

javascript - 全局识别的元素、Typescript 和仅限 Safari 的错误?

javascript - 从js请求查询字符串中提取值

javascript - 无法在 Express 上的 NodeJS 服务器中发布参数 id

javascript - Angular/Nodejs 中未引用的函数错误

Angular 5 HttpInterceptor this.interceptor.intercept 不是一个函数

javascript - 如何使用Drive API设置文件的元数据?

html - Ionic 4 showWhen hideWhen