[英]Angular Display/Hide Image On Button Click
In my code, I'm trying to display and hide an image via a link when a button is clicked.在我的代码中,我试图在单击按钮时通过链接显示和隐藏图像。 Right now, when I click the button, the image opens in a different tab in Chrome.
现在,当我单击按钮时,图像会在 Chrome 的不同选项卡中打开。 But I want to display it in my app's page.
但我想在我的应用程序页面中显示它。 I need to assign the link to the TypeScript to make some changes later but I couldn't figure it out.
我需要将链接分配给 TypeScript 以便稍后进行一些更改,但我无法弄清楚。 How can I do that?
我怎样才能做到这一点?
HTML: HTML:
<button mat-button matRipple class="purple-500 fuse-white-fg mr-12" (click)="imageSource()">Display</button>
TS: TS:
imageSource(){
window.open("http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/^xa^cfa,50^fo100,100^fdHello World^fs^xz");
}
Unfortunately, you can't just display images like this, however.但是,不幸的是,您不能只显示这样的图像。 More information here.
更多信息在这里。
Here's how you can display an image depending on a button click.以下是如何根据按钮单击显示图像的方法。
<button mat-button matRipple class="purple-500 fuse-white-fg mr-12"; (click)="imageSource()">Display</button>
<img [src]="url" *ngIf="hidden" />
let hidden = false;
let url = "http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/^xa^cfa,50^fo100,100^fdHello World^fs^xz"
imageSource(){
this.hidden = !this.hidden;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.