Ionic 4使用搜索栏读取本地JSON文件

Question

目前，我一直面临着在我的Ionic项目中对本地JSON数据进行过滤的问题。在编写应用程序的filterItems函数时，我查看了其他资源，并将其作为参考。在使用该函数时，我在控制台中没有收到任何错误，但是该表没有过滤或将过滤后的项返回给ngx-datatable，我正在使用ngx-datatable将数据显示给应用程序。我想知道这个问题是与filterItems函数有关，还是与我将数据从本地json文件加载到应用程序的方式有关。任何帮助都会有很大的帮助。我将包括HTML代码和typescript代码。

HTML代码

<ion-header>
  <ion-toolbar color="primary">
    
    <ion-buttons slot="start" class="button_style">
      <ion-button (click)="switchStyle()">
        {{ tablestyle }}
      </ion-button>
    </ion-buttons>
 
    <ion-searchbar animated  slot="end"  (ionInput)="filterItems($event)" placeholder="Search by Path Request"></ion-searchbar>

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

    <ngx-datatable  class="request_table"
    [ngClass]="tablestyle" 
    [rows]="items"
    [columnMode]="'force'" 
    [headerHeight]="50" 
    [rowHeight]="'auto'">
 
    <ngx-datatable-column name="requestid"></ngx-datatable-column>
    <ngx-datatable-column name="number"></ngx-datatable-column>
    <ngx-datatable-column name="requeststatus"></ngx-datatable-column>
    <ngx-datatable-column name="animalcount"></ngx-datatable-column>
    <ngx-datatable-column name="primaryinvestigator"></ngx-datatable-column>
    <ngx-datatable-column name="studypathologist"></ngx-datatable-column>

    <ngx-datatable-column name="Actions" sortable="false" prop="name">
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
        <ion-button size="small" fill="outline" (click)="goToProcedureDetails(row)">View</ion-button>
      </ng-template>
    </ngx-datatable-column>
 
  </ngx-datatable>
 
</ion-content>

打字代码

import { AlertController } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';
import { Router, ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';


@Component({
  selector: 'app-request',
  templateUrl: './request.page.html',
  styleUrls: ['./request.page.scss'],
})
export class RequestPage implements OnInit {

  items: any[];
  searchItems: any;
  public RequestFilter: string[];
  tablestyle = 'bootstrap';

  constructor(private alertCtrl: AlertController, private http: HttpClient, private router: Router) { }

  ngOnInit() {
    this.loadData();
  }

  loadData(){
    let data:Observable<any>;
    data = this.http.get('assets/requests.json');
    data.subscribe(data => {
      this.items = data;
      console.log(this.items);
    });
    this.initializeItems();
  }

  initializeItems(){
    this.RequestFilter = this.items;
  }

  goToProcedureDetails(row){
    this.router.navigate(['/view-procedure', row.pathrequestid]);
    console.log(row.pathrequestid);
  }

  filterItems(ev:any){
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    var val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.RequestFilter = this.items.filter((item) => {
       return (item.toString().toLowerCase().indexOf(val.toString().toLowerCase()) > -1);
     })
    }
  }
}

Answer 1

您的代码无法工作，因为您正在筛选对象

items: any[];
return (item.toString().toLowerCase().indexOf(...

如果您想要筛选某一列(例如，requeststatus列)，您可以这样做：

return (item.requeststatus.toString().toLowerCase().indexOf(val.toString().toLowerCase()) > -1);

如果您想筛选表中的所有列，我建议您查看一下at this question