Question

我正在用Ionic 3编写一个应用程序，我想在其中显示被

隐藏的图片

document.getElementById("ImgID").style.display = "none";

属性。因此，我选择了一个按钮，它将Attribute更改为

document.getElementById("ImgID").style.display = "";

我的.ts文件：

  button_tapped(){
    document.getElementById("ImgID1").style.display = "";
    document.getElementById("ImgID2").style.display = "";
    document.getElementById("ImgID3").style.display = "";
  }

按钮的我的.html文件：

<ion-img    
   class = "button_img_1"   
   (click)="button_tapped()"   
   src="path_to_image"> 
</ion-img>

我的.html图片文件：

<ion-img 
  class = "Image_1"
  id = "Image_1"
  src="path_to_image">
</ion-img>

我的.css图片：

.Image_1{
        width: 10%;
        height: 0;
        position: absolute;
        padding-bottom: 3%;
        top: 65%;
        left: 20%;
    }

因此，如果我在不显示图片的情况下启动应用程序，然后按按钮，则图像将不会显示，其位置只是一个灰色方块。但是，如果我实现了另一个用于隐藏图像的按钮，则启动显示图片的应用程序，按此按钮将其隐藏，然后按“显示”按钮，它们将显示为应有的样子。

有人知道我的问题在哪里吗？

Answer 1

IONIC使用Angular。因此，您也可以使用* ngIf来显示/隐藏点击的图像。您将* ngIf放在图像上。

显示/隐藏离子按钮中的图片

1 个答案: