单击按钮时角度显示/隐藏图像答案

【问题标题】：Angular Display/Hide Image On Button Click单击按钮时角度显示/隐藏图像
【发布时间】：2021-08-22 09:33:40
【问题描述】：

在我的代码中，我试图在单击按钮时通过链接显示和隐藏图像。现在，当我单击按钮时，图像会在 Chrome 的不同选项卡中打开。但我想在我的应用程序页面中显示它。我需要将链接分配给 TypeScript 以便稍后进行一些更改，但我无法弄清楚。我该怎么做？

HTML：

<button mat-button matRipple class="purple-500 fuse-white-fg mr-12" (click)="imageSource()">Display</button>

TS：

    imageSource(){
window.open("http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/^xa^cfa,50^fo100,100^fdHello World^fs^xz");
    }

【问题讨论】：

这能回答你的问题吗？ Angular 5 ngHide ngShow [hidden] not working 您可以在模板中使用 *ngIf 指令并将其连接到组件中的布尔值。 window.open() 打开另一个窗口，这可能不是您想要的。您也可以使用img 标签并有条件地使用*ngIf 显示它。您可以将组件中的链接保存为字符串并将其分配给图像。

标签： javascript html angular typescript

【解决方案1】：

很遗憾，您不能只显示这样的图像。更多信息here.简而言之，您需要将图像以二进制格式存储，以便您可以通过HTTP请求获取它。

以下是根据按钮单击显示图像的方法。

在您的 HTML 模板中：

<button mat-button matRipple class="purple-500 fuse-white-fg mr-12"; (click)="imageSource()">Display</button>
<img [src]="url" *ngIf="hidden" />

在您的 TS 组件中：

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

【讨论】：