将 ng-if 添加到 html 中的图像

Question

因此，我的 ionic 项目的 html 页面上有两张图片，我希望在单击第一张图片时显示第二张图片。因此，我在我的图像中添加了一个 onClick，例如：

<img  src="path"
    alt="foo" 
    style="foo;
    width:foo;
    left:30%;top:30%" 
    class = "foo"
    onclick="ng-model='bar'" >

第二张图片

<img  src="path" 
    *ngIf="bar">

但它不是那样工作的。是方法不对吗？我这样尝试是为了避免额外的 javascript.

Answer 1

您可以按如下方式完成：

<img src="http://via.placeholder.com/350x150/222222" (click)="hiddenImage.style.display='inline'"/>
<img #hiddenImage style="display: none" src="http://via.placeholder.com/350x150/888888"/>

但根据您的具体用例，以不同的方式进行操作可能仍然是更好的主意。

使用 *ngIf 你可能仍然需要一个变量来保存图像是否应该在你的模板中显示的值：

<img src="http://via.placeholder.com/350x150/222222" (click)="showImage=true"/>
<img src="http://via.placeholder.com/350x150/888888" *ngIf="showImage"/>

在你的组件中你应该声明：

showImage: boolean = false;

将 ng-if 添加到 html 中的图像

Add ng-if to an image in html

html

angular-ng-if

ionic-framework

ionic3