在离子框架中显示隐藏 [英] Show hide in ionic framework

问题描述

我想为我的离子应用程序显示隐藏功能：

I want a show hide function for my ionic app:

以下是我到目前为止所做的，在xyz.html文件中：

Below is what I have done so far, in xyz.html file:

<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>

my xyz.ts file

my xyz.ts file

export class xyzpage{
public PtagClicked: boolean = false;

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

    }           
  }
}

我的问题是的，我在这个页面上创建了动态数字，如果我点击1项，它会显示/隐藏所有项目的数据而不是我点击的数据。

My problem is, I have dynamic numbers of created on this page, and if I click on 1 item, it show/hide all item's data and not the one I clicked for.

我想如果我可以为ngIf创建动态值，问题就会解决，但我尝试了，但我不能因为我是离子的新手。

I guess the problem will be solved if I can create dynamic values for ngIf, but I tried and not able to as I am new to ionic.

任何帮助将不胜感激。

我安装了最新的IONIC。

I have latest IONIC installed.

谢谢

推荐答案

使用 Renderer2 添加类，setStyle或者你想要的任何东西，将元素引用传递给你的click事件处理程序

Use the Renderer2 to addClass, setStyle, or whatever you want, passing the element reference to your click event handler

这里有一个演示

<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

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

}

这篇关于在离子框架中显示隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！