在離子框架中顯示隱藏

Question

我想要為我的離子應用程序顯示隱藏功能：

下面是我到目前為止在xyz.html文件中所做的事情：

<ion-item>    
<p class="font_c_2 gra_reg" (click)="onPtagClick(part.reg_id)"  *ngIf="!PtagClicked">
          {{part.fsp_partner_location}}
</p>
<p class="font_c_2 gra_reg" *ngIf="PtagClicked" (click)="onPtagClick1(part.reg_id)"  style="white-space:normal;">
          {{part.fsp_partner_location}}
</p>
</ion-item>

我的xyz.ts文件

export class xyzpage{
public PtagClicked: boolean = false;

public onPtagClick(id) {         
    {        
     this.PtagClicked = !this.PtagClicked;          
    }           
  }
 public onPtagClick1(id) {
   {            
    this.PtagClicked = false;   

    }           
  }
}

我的問題是，我在此頁面上創建了動態編號，如果單擊1個項目，它將顯示/隱藏所有項目的數據，而不是我單擊的數據。

我想如果可以為ngIf創建動態值，那么該問題將會解決，但是我嘗試了一下，但由於我不是離子類的新手，所以無法這樣做。

任何幫助將不勝感激。

我安裝了最新的IONIC。

謝謝

Answer 1

使用Renderer2來添加class，setStyle或所需的任何內容，將元素引用傳遞給click事件處理程序

這是一個演示

的HTML

<ion-item *ngFor="let item of items">
  <h3 #text>{{item}}</h3>
  <button ion-button item-right (click)="onShow(text)">Show</button>
  <button ion-button color="danger" item-right (click)="onHide(text)">Hide</button>
</ion-item>

TS

import { Component, Renderer2 } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

public items: string[] = [
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5",
    "Item 6",
    "Item 7",
    "Item 8",
    "Item 9",
    "Item 10",   
];

  public PtagClicked: boolean = false;

  constructor(public navCtrl: NavController, private render: Renderer2) { }

  public onShow(controlToShow) {
    this.render.setStyle(controlToShow, 'visibility', 'visible');
  }
  public onHide(controlToHide) {
    this.render.setStyle(controlToHide, 'visibility', 'hidden');
  }

}