выбор фильтра ионов, применяемый из json данных - PullRequest
Новая
       6

выбор фильтра ионов, применяемый из json данных

2 голосов
/ 05 мая 2020

Я новичок в Ioni c, и я планирую использовать ion-select для фильтрации / выбора статуса заказа.

Мой ion-select выглядит следующим образом не работает.

enter image description here

Как я могу применить данные JSON к своим вариантам выбора ионов?

Вот моя страница. 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>

1 Ответ

2 голосов
/ 12 мая 2020

Вам необходимо захватить выбранные данные, используя (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 );
  }
}
...