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

【问题标题】：Ionic 4 read Local JSON file with Search BarIonic 4 使用搜索栏读取本地 JSON 文件
【发布时间】：2020-11-10 02:15:11
【问题描述】：

目前，我一直面临在 Ionic 项目中对本地 JSON 数据进行过滤的问题。我查看了其他资源，并在为应用程序编写 filterItems 函数时将其用作参考。使用该函数时，我在控制台中没有收到任何错误，但是该表没有过滤或将过滤后的项目返回到我用来向应用程序显示数据的 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);
     })
    }
  }
}

【问题讨论】：

你可以试试这个data.subscribe(data => {this.items = data;console.log(this.items);this.initializeItems();});
刚刚试了一下。我在控制台中没有收到任何错误。但是我的 Ngx-Datatable 上仍然没有任何改变。我真的很好奇是什么导致了这个问题。

标签： json angular typescript ionic-framework ionic4

【解决方案1】：

您的代码无法工作，因为您正在过滤对象

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

如果您想过滤一列（例如 requeststatus 列），您可以这样做：

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

如果你想对表格的所有列进行过滤，建议你看看at this question

【讨论】：