我是 Ionic 新手,我计划使用 ion-select 来过滤/选择订单状态。
我的 ionic 选择看起来像这样
如您所见,我希望它只显示“订单已处理”,但事实并非如此。
如何将 JSON 数据应用于我的 ionic 选择选择?
这是我的页面.ts
constructor(private dataService: DataService, private http: HttpClient) {
this.data = '';
this.error = '';
}
//comment this if you gonna use api url
private prepareDataRequest(): Observable<any> { // <-- change return type here
// Define the data URL
const dataUrl = 'assets/data/data.json';
// Prepare the request
return this.http.get(dataUrl);
}
orders= [];
ionViewWillEnter() {
// Load the data
this.prepareDataRequest().subscribe( //comment this if you will use Api Url
//this.dataService.getRemoteData().subscribe(
data => {
// Takes data into in single Array and print
this.orders = data.output.Result.OrderTracker;
},
err => {
// Set the error information to display in the template
this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
}
);
}
这是我的 html
<ion-list>
<ion-item>
<ion-label>Status</ion-label>
<ion-select lines="full" multiple="true" cancelText="Cancel" okText="Okay" >
<ion-select-option value="processed">Order Processed</ion-select-option>
<ion-select-option value="received">Order Received</ion-select-option>
<ion-select-option value="pending">Order Pending</ion-select-option>
<ion-select-option value="cancelled">Order Cancelled</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
<ng-container *ngIf="!error; else errorContent">
<p *ngFor="let order of orders; let i=index;">
{{ order?.ordernumber || '-' }} - {{order?.status || '' }} - {{order?.date || '' }} - {{order?.time || '' }}
<ion-button ion-button (click)="hide(i)">UPDATE</ion-button>
<ion-card *ngIf="currentDisplayIndex==i">
<ion-card-header>
<ion-card-title>UPDATE {{ order?.ordernumber || '-' }} </ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-input type="text" placeholder="Enter Status"></ion-input>
<ion-input type="date" placeholder="Enter Date"></ion-input>
<ion-button>Submit</ion-button>
</ion-card-content>
</ion-card>
</p>
</ng-container>
最佳答案
您需要使用(ionChange)
捕获所选数据并将其应用到订单
,如下所示
HTML
<ion-select lines="full" multiple="true" cancelText="Cancel" okText="Okay"
[(ngModel)]="ordersSelected" (ionChange)='orderTypeSelected()' >
<ion-select-option value="processed">Order Processed</ion-select-option>
<ion-select-option value="received">Order Received</ion-select-option>
<ion-select-option value="pending">Order Pending</ion-select-option>
<ion-select-option value="cancelled">Order Cancelled</ion-select-option>
</ion-select>
在component.ts中
orders= [];
actualOrders = [];
ordersSelected = [];
constructor(private dataService: DataService, private http: HttpClient) {
this.data = '';
this.error = '';
}
//comment this if you gonna use api url
private prepareDataRequest(): Observable<any> { // <-- change return type here
// Define the data URL
const dataUrl = 'assets/data/data.json';
// Prepare the request
return this.http.get(dataUrl);
}
ionViewWillEnter() {
// Load the data
this.prepareDataRequest().subscribe(
data => {
// Takes data into in single Array and print
this.actualOrders = data.output.Result.OrderTracker;
this.orders = data.output.Result.OrderTracker;
},
err => {
// Set the error information to display in the template
this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
}
);
}
public orderTypeSelected(){
if (this.ordersSelected.length < 1){
this.orders = JSON.parse(JSON.stringify(this.actualOrders))
}else{
this.orders = this.actualOrders.filter(d => this.ordersSelected.find(option => d.status === option );
}
}
关于javascript - 从 json 数据应用 ionic 选择过滤器选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61608240/