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

Question

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

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);

如果你想过滤table的所有列，我建议你看一下at this question

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

Ionic 4 read Local JSON file with Search Bar

json

typescript

ionic-framework

angular

ionic4