单击每个字段时如何显示和隐藏离子卡？

Posted 2023-03-13

【中文标题】单击每个字段时如何显示和隐藏离子卡？

【英文标题】：How do I show and hide ion-card when clicked per field?

【发布时间】：2020-08-19 16:47:51

【问题描述】：

当我点击一个更新按钮时。

它显示了与其对齐的所有数据/字段的所有离子卡，这不是我想要的，它也不会再次隐藏卡/s。

那么，当点击特定按钮以及每个数据/字段时，如何显示/隐藏卡片？

顺便说一下，我的数据是 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;
  

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

您可以使用数组的索引来显示/隐藏单个项目的详细信息。

<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
      

【讨论】：

谢谢！它只显示特定的项目/数据/字段。但是当我再次点击更新按钮时它并没有隐藏。

更新了我的答案。现在，如果再次单击相同的按钮，详细信息将隐藏。如果您遇到任何错误，请告诉我。如果它符合您的目的，请将其标记为答案。 :)