时间戳

首页 > 解决方案 > Ionic 4 按多个值过滤 JSON

json - Ionic 4 按多个值过滤 JSON

问题描述

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

标签： jsonangulartypescriptionic-frameworkionic4

解决方案

我们可以排除过滤器，因为它可以工作。请同时发布模板以帮助其他观众。

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

  1. 延迟显示结果视图，直到分配项目。

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

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

然后在模板上

    *ngFor="let item of items | async"

希望这些帮助。

推荐阅读