Как показать и скрыть ионную карту при нажатии на поле? - PullRequest
Новая
       8

Как показать и скрыть ионную карту при нажатии на поле?

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

Когда я нажал одну кнопку обновления.

enter image description here

Он показывает всю ионную карту всех данных / поля, которые выровнены с ней чего я не хочу, и он также не скрывает карту / с снова.

enter image description here

Итак, как мне показать / скрыть карту, когда Speci c нажата кнопка, а также для данных / поля?

Кстати, мои данные в формате JSON.

Вот мой код page.ts 

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

hide() {
    this.hideMe = true;
  }

Вот моя страница. html код 

<ng-container *ngIf="!error; else errorContent">
    <p *ngFor="let order of orders">
      {{ order?.ordernumber || '-' }} - {{order?.status || '' }} - {{order?.date || '' }} - {{order?.time || '' }}
      <ion-button ion-button (click)="hide()">UPDATE</ion-button>
      <ion-card *ngIf="hideMe">
        <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-card-content>
      </ion-card>
    </p>
  </ng-container>

1 Ответ

1 голос
/ 05 мая 2020

Вы можете использовать индекс массива, чтобы показать / скрыть детали отдельного элемента. 

<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-card-content>
      </ion-card>
    </p>
  </ng-container>

В файле .ts добавьте переменную: 

currentDisplayIndex:number=-1;

Это будет удерживать индекс текущего элемента для отображения. -1 означает, что никакие детали какого-либо элемента не должны отображаться.

Затем передает индекс текущего элемента методу hide () из шаблона 

    hide(index) {

  if(this.currentDisplayIndex==index)
   {
     this.currentDisplayIndex=-1; //Reset the index if the current item index is same as the item index passed on button click
     return; //Don't execute further
   }
   this.currentDisplayIndex = index; //Set the current index to the item index passed from template. If you click on item number 3, only 3rd item details will be visible
      }
...