Ionic 4 按多个值过滤 JSON

Posted 2023-03-13

【中文标题】Ionic 4 按多个值过滤 JSON

【英文标题】：Ionic 4 Filter JSON by multiple values

【发布时间】：2020-11-12 11:58:25

【问题描述】：

目前，在按多个条件过滤本地 JSON 文件时，我遇到了一个问题。我最初认为这将是一个简单的解决方法，您可以使用 and(&&) 来组合多个条件。但是，无论何时将数据加载到 Ngx 数据表中，都不会出现任何内容。过滤一直在使用单个条件，这就是为什么我发现多个条件不起作用真的很奇怪。 JSON文件可能有问题吗？我必须使用另一种方法来做到这一点吗？还是我加载数据视图的方式？我真的很好奇为什么这不起作用，因为我认为 .filter() 可以处理多个条件，因为它一直在处理之前提供的单个条件。

打字稿文件

import  Component, OnInit  from '@angular/core';
import  Router, ActivatedRoute  from '@angular/router';
import data from './../../assets/pathrequests.json';
import  NavController  from '@ionic/angular';
import  NavigationExtras  from '@angular/router';
import  AlertController  from '@ionic/angular';
import  HttpClient  from '@angular/common/http';
import  Observable  from 'rxjs';


@Component(
  selector: 'app-view-necropsy-details',
  templateUrl: './view-necropsy-details.page.html',
  styleUrls: ['./view-necropsy-details.page.scss'],
)
export class ViewNecropsyDetailsPage implements OnInit 

  pathrequestid: string;
  procedureid: string;
  requestdate: string;
  animalqty: string;
  marker: string;
  method: string;
  fixative: string;
  handling: string;
  processing: string;

  items: any[];
  private pathrequests: any[] = data;
  tablestyle = 'bootstrap';


  constructor(private alertCtrl: AlertController, private http: HttpClient, private route: ActivatedRoute, private router: Router, public navCtrl: NavController)  

  ngOnInit() 
    this.route.queryParams.subscribe(params => 
      this.pathrequestid = params["pathrequestid"];
      this.procedureid = params["procedureid"];
      this.requestdate = params["requestdate"];
      this.animalqty = params["animalqty"];
      this.marker = params["marker"];
      this.method = params["method"];
      this.fixative = params["fixative"];
      this.handling = params["handling"];
      this.processing = params["processing"];
    );
    this.loadData();
  

  loadData()
    let data:Observable<any>;
    data = this.http.get('assets/tissue.json');
    data.subscribe(data => 
      this.items = data.filter(item => item.pathrequestid === this.pathrequestid && item.procedureid === this.procedureid);
      console.log(this.items);
    )
  

HTML 模板

<ion-header>
  <ion-toolbar color="primary">

    <ion-buttons slot="start">
      <ion-menu-button menu ="main-menu"></ion-menu-button>
    </ion-buttons>

    <ion-buttons>
      <ion-back-button defaultHref="/view-procedure"></ion-back-button>
    </ion-buttons>

     <ion-buttons class="button_style"  slot="end">
      <ion-button (click)="switchStyle()">
         tablestyle 
      </ion-button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>


<ion-content>
  
  <ngx-datatable  class="necropsydetails_table"
    [ngClass]="tablestyle" 
    [rows]="items"
    [columnMode]="'force'" 
    [headerHeight]="60" 
    [rowHeight]="'auto'">
 
    <ngx-datatable-column name="tissue"></ngx-datatable-column>
    <ngx-datatable-column name="collectflg"></ngx-datatable-column>
    <ngx-datatable-column name="weighflg"></ngx-datatable-column>
    <ngx-datatable-column name="photoflg"></ngx-datatable-column>
    <ngx-datatable-column name="tissuecomment"></ngx-datatable-column>

  </ngx-datatable>


</ion-content>

【参考方案1】：

我们可能会在过滤器起作用时排除它。请同时发布模板以帮助其他查看者。

鉴于可用信息，它可能与模型或模板有关；有时需要戳框架以强制渲染（即 Angular 中的更改检测）。我可以建议：

在分配项目之前延迟显示结果视图。

在管道内移动过滤器并使用异步管道显示已过滤的数据。不过，项目需要是可观察的。

 this.http.get('assets/tissue.json')
 .pipe(filter(item => /*criteria here*/)

然后在模板上

    *ngFor="let item of items | async"

希望这些帮助。

【讨论】：

那个管道不会像你想象的那样做。每次可观察到的发射时都会调用过滤器。 item 在这种情况下不会是单个项目，而是来自 http 调用的完整响应。您想使用地图，因为您正在更改（映射）从服务器获得的数据，然后是内置的数组过滤器。 this.http.get().pipe(map(response => response.filter(item => someCriteria)))

啊！好收获！

您好，我用模板更新了页面以供参考。我在使用管道过滤数据时遇到了困难。究竟要怎么写出来？因为我的写作方式在页面上出现错误。

【参考方案2】：

您的过滤器应该可以工作，但您可能有竞争条件或错误的参数。 this.procedureid是在queryParams异步调用中设置的，但是加载数据是同步调用的，同时也调用了一个异步函数（http get）。

如果您将调用移至订阅内的this.loadData()，则应确保数据。

  ngOnInit() 
    this.route.queryParams.subscribe(params => 
      this.pathrequestid = params["pathrequestid"];
      this.procedureid = params["procedureid"];
      this.requestdate = params["requestdate"];
      this.animalqty = params["animalqty"];
      this.marker = params["marker"];
      this.method = params["method"];
      this.fixative = params["fixative"];
      this.handling = params["handling"];
      this.processing = params["processing"];
      // calling it now will at least make sure you attempted to set the data from params, but double check the params are actually returning data as well.
      this.loadData();
    );
    // calling it here will execute before the above code
    // this.loadData();
  

您可以使用其他 RxJS 运算符变得更复杂，但这是一个足够简单的情况，可能不值得将其复杂化。

【讨论】：

我仔细检查了参数，数据实际上是通过引用控制台返回到页面的。我将 this.loadData() 移到订阅中，但仍然遇到问题。这真的很奇怪。