从 json 数据应用的离子选择过滤器选项

Question

我是 Ionic 的新手，我打算使用 ion-select 来过滤/选择订单状态。

我的 ion-select 看起来像这样

如您所见，我希望它只显示“已处理订单”，而它不显示。

如何将 JSON 数据应用于我的离子选择选项？

这是我的page.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>

Answer 1

您需要使用(ionChange) 捕获所选数据并将其应用于orders，如下所示

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