Ionic 4 按多个值过滤 JSON

Question

目前，在按多个条件过滤本地 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>

Answer 1

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

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

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

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

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

然后在模板上

    *ngFor="let item of items | async"

希望这些帮助。

Answer 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 运算符变得更复杂，但这是一个足够简单的情况，可能不值得将其复杂化。