gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 13:34:28 26 4
gpt4 key购买 nike

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

最佳答案

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

items: any[];
return (item.toString().toLowerCase().indexOf(...
如果你想过滤一列(例如 requeststatus 列),你可以这样做:
return (item.requeststatus.toString().toLowerCase().indexOf(val.toString().toLowerCase()) > -1);
如果要对表的所有列进行过滤,建议您查看 at this question

关于json - Ionic 4 使用搜索栏读取本地 JSON 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63001981/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com