html - 如何在 Angular 6中单击图像时更改边框半径

我有两个图片。一个是矩形，另一个是圆角Image。还有一个div。这个div是一个Square框。


如果单击矩形图像，则正方形框的边界半径为0px。
就像我单击圆角一样，方框的边框半径为5px。

rectangle():void{
document.getElementsByClassName('square')[0]["style"].borderRadius="0px";
}
roundedCorner():void{
document.getElementsByClassName('square')[0]["style"].borderRadius="5px";
}

.square{
width:200px;
height:100px;
border:1px solid black;
}

<img (click)="rectangle()" src="rectangleImage">
<img (click)="roundedCorner()" src="roundedCornerImage">

<div class="square"></div>

我尝试了这个。但这对我不起作用。如何在角度2或4或5或6中做到这一点？请任何人帮助我。

最佳答案

<img src = "assets/images/web423.jpg" (click)="borderradius='0px'" width="150px" height="150px"/>
<img src = "assets/images/web423.jpg" (click)="borderradius='5px'" width="150px" height="150px"/>

<div [ngStyle]="{'border-radius':borderradius}">Border Radius</div>

您可以使用[ngStyle]更改元素的任何样式。

关于html - 如何在 Angular 6中单击图像时更改边框半径，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51556423/