javascript - 在 ionic 中显示/隐藏按下按钮的图片

Question

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

隐藏的图片

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

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

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%;
    }

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

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

Answer 1

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