在 Angular 中放大和缩小不适用于 ngx-image-cropper答案

【问题标题】：Zoom in & zoom out in Angular not working for ngx-image-cropper在 Angular 中放大和缩小不适用于 ngx-image-cropper
【发布时间】：2021-05-05 23:05:11
【问题描述】：

我正在尝试从 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>

【问题讨论】：

标签： angular typescript angular8 ngx-image-cropper

【解决方案1】：

类似于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+')'" ...>

【讨论】：

我在我的页面中尝试了您的代码，但对于灰度和棕褐色等，缩放没有以类似的方式发生，但滑块正在工作。我没有收到任何错误，只收到警告请帮助我

【解决方案2】：

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 文件中。

【讨论】：