如何从按钮角度4显示图像

Question

所以我试着做一个基本的网站，当我点击一个按钮时，我需要显示一个图像。问题是，它显示了图像，但是当我单击另一个按钮来显示另一个图像时，前面的图像就会保留下来。这是我的密码。我用的是角4和打字稿。

component.ts

openPredictionImg() {
const myImg = new Image();
myImg.useMap = '../../assets/prediction.png';
const img = document.createElement('img');
document.body.appendChild(img);
img.setAttribute('src', myImg.useMap);
img.onload = (stop);}

openRebalancingImg() {
const myImg = new Image();
myImg.useMap = '../../assets/rebalancing.png';
const img = document.createElement('img');
document.body.appendChild(img);
img.setAttribute('src', myImg.useMap);
img.onload = (stop);}

openVisualizationImg() {
const myImg = new Image();
myImg.useMap = '../../assets/visualization.png';
const img = document.createElement('img');
document.body.appendChild(img);
img.setAttribute('src', myImg.useMap);
img.onload = (stop);}

component.html

<button class="predictionBtn "(click)="openPredictionImg()" style="width: 10%">Prediction</button>

<button class="rebalancingBtn" (click)="openRebalancingImg()" style="width: 10%">Rebalancing</button>

<button class="visualizationBtn" (click)="openVisualizationImg()" style="width: 10%">Visualization</button>

​

Answer 1

好的，这是解决办法

component.ts

text = '';
openPrediction() {
this.text = '...' }

component.html

<button class="predictionBtn " (click)="imageSource = '../../assets/prediction.png'; openPrediction()" >Prediction</button>
<img [src]="imageSource" *ngIf="imageSource" style="width: 10%"/>
{{ text }}

Answer 2

在角度上，你不能直接接触DOM。

我能想到的最简单的方法是：

<button class="predictionBtn "(click)="imageSource = '../../assets/prediction.png'" style="width: 10%">Prediction</button>

<button class="rebalancingBtn" (click)="imageSource = '../../assets/rebalancing.png'" style="width: 10%">Rebalancing</button>

<button class="visualizationBtn" (click)="imageSource = '../../assets/visualization.png'" style="width: 10%">Visualization</button>

<img [src]="imageSource" *ngIf="imageSource"/>

在您的类型记录中，删除所有以前的代码，只需声明一个变量。

imageSource: string;