如何在角度6中单击图像时更改边框半径

Question

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

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

JpaRepository.save()

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

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

Answer 1

<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]更改元素的任何样式。