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

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放在图像上。