问题描述
我正在尝试从 ngx-image-cropper 进行放大和缩小。我没有收到任何错误,但是当我单击 zoomOut 或 ZoomIn 按钮时,它不起作用。
我在这里做错了什么?
我的 TS 代码
zoomOut() {
this.scale -= .1;
this.transform = {
...this.transform,scale: this.scale
};
}
zoomIn() {
this.scale += .1;
this.transform = {
...this.transform,scale: this.scale
};
}
我的 HTML 代码
<button class="btn zoomIn" (click)="zoomIn()" tooltip="Zoom In" data-toggle="tooltip" data-placement="top" title="Zoom In"></button>
<button class="btn zoomOut" (click)="zoomOut()" tooltip="Zoom Out" data-toggle="tooltip" data-placement="top" title="Zoom Out"></button>
解决方法
它类似于这个 another SO。嗯,真的 Angular 总是一样的,.ts(模型)和 .html(视图)中的关系变量。那么在文档 about binding 中,例如很穷。我个人讨厌这个例子 {{variable}}
:)
您声明了一个可变比例
scale:number=1;
<!--see that you can use the .html to makes "simple code"
(equal a variable to another an so on)
-->
<button class="btn zoomIn" (click)="scale=scale+.1"></button>
<button class="btn zoomIn" (click)="scale=scale-.1"></button>
<img [style.transform]="'scale('+scale+')'" ...>
,
export class AppComponent {
zoom:boolean=false;
zoomOut(){
this.zoom=false;
}
zoomIn(){
this.zoom=true;
}
getheight(){
if(this.zoom==true){
return '500px';
//return your desiderd value in pixel or in percentage
}
else{
return '200px';
}
}
}
button{
padding: 8px;
}
#test-zoom{
height: 500px;
width: 100%;
position: relative;
background: red;
}
.zoom-card{
height: 500px;
width: 90%;
position: relative;
margin: auto;
background: lime;
}
.test-image{
width: auto;
}
<section id="test-zoom">
<div class="zoom-card">
<img [ngStyle]="{'height':getheight()}" width="auto" class="test-image" src="https://www.netcetra.com/images/howto_images/photoshop-logo.jpg">
<br>
<button (click)="zoomIn()" >Zoom In</button>
<button (click)="zoomOut()" >Zoom Out</button>
</div>
</section>
使用此代码并将其粘贴到 app.component.ts、CSS 和 HTML 文件中。