Question

我正在尝试根据右下方双滑块的输入在条形图的顶部创建过滤器窗口。我最初使用svg方法，但是对于我的角度应用程序来说，方法太复杂了。我切换到了相对简单的方法，即在条形图的顶部使用div并根据双滑动条的输入将其左右移动，反之亦然。我正在努力弄清楚如何根据滑块上的值调整div的大小并将其左右移动。我对成为一名开发人员总体而言还很陌生，所以我猜测它缺乏经验，这就是为什么我无法找到解决此问题的更明智的方法。

lowerSlider = document.querySelector('#lower');
upperSlider = document.querySelector('#upper');

@Input() lowerSliderMin = 0;
@Input() lowerSliderMax = 50;
@Input() upperSliderMin = 0;
@Input() upperSliderMax = 50;
@Input() rangeName;
@Input() filterId;

@Output() rangeValues: EventEmitter < any > = new EventEmitter();

lowerVal = 0;
upperVal = 50;

checkVals() {
  if (this.upperVal < this.lowerVal + 4) {
    this.lowerVal = this.upperVal - 4;

    if (this.lowerVal == this.lowerSliderMin) {
      this.upperVal = 4;
    }
  }

  if (this.lowerVal > this.upperVal - 4) {
    this.upperVal = this.lowerVal + 4;

    if (this.upperVal == this.upperSliderMax) {
      this.lowerVal = this.upperSliderMax - 4;
    }
  }

  this.EmitSliderValues();

}

EmitSliderValues() {
  let lowerVal = this.lowerVal;
  let upperVal = this.upperVal;
  let filterId = this.filterId;

  this.rangeValues.emit({
    filterId,
    lowerVal,
    upperVal
  });


}
colorchange() {
  const barchart = document.getElementById('bar-chart');
  const barchart_width = document.getElementById('bar-chart');
  const barchart_holder = document.getElementById('graph-holder');

  if (this.lowerVal > 0) {
    console.log(this.lowerVal);
    barchart_width.style.width = '50%'
    barchart_width.style.width += '-20px';
    barchart_width.style.backgroundColor = 'green';


  } else if (this.upperVal < 50) {
    console.log('the color doesn;t change');
    barchart_width.style.width = '40px';
    barchart.style.backgroundColor = 'blue';

  }
}

<div #barChart id="bar-chart" style="background-color: slateblue">
  <div id="graph-holder" style="background-color:yellow"></div>
</div>

<div class="multi-range">
  <input type="range" min="0" max="50" id="lower" [(ngModel)]="lowerVal" (change)="checkVals()" (click)="colorchange()">
  <input type="range" max="0" max="50" id="upper" [(ngModel)]="upperVal" (change)="checkVals()">
</div>

更新：我彻底改变了b / c移动div的方法。我走了另一条用“角度”绘制“画布”的道路，但仍然卡住了我的代码，虽然很简单，但是我无法理解问题。请帮忙。新代码是： `` 从'@ angular / core'导入{Component，OnInit，Input}; 从'@ angular / core'导入{ViewChild，ElementRef}; 从“ rxjs”导入{订阅}；

         @Component({
         selector: 'app-canvas',
         templateUrl: './canvas.component.html',
         styleUrls: ['./canvas.component.css']
         })
         export class CanvasComponent implements OnInit {
         @ViewChild('myCanvas', {static: true}) myCanvas: ElementRef;
         public context: CanvasRenderingContext2D;

         constructor() { }

         ngOnInit() {
         let c = document.getElementById('myCanvas');
         let ctx = this.c.getContext('2d');
         this.ctx.rect(20,20,150,100);
         this.ctx.stroke();

         }
         }``

    undefined
    at  




 CanvasComponent.push../src/app/canvas/canvas.component.ts.CanvasComponent.ngOnInit (canvas.component.ts:21)
    at checkAndUpdateDirectiveInline (core.js:19341)
    at checkAndUpdateNodeInline (core.js:27597)
    at checkAndUpdateNode (core.js:27559)
    at debugCheckAndUpdateNode (core.js:28193)
    at debugCheckDirectivesFn (core.js:28153)
    at Object.eval [as updateDirectives] (BarChartComponent.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:28145)
    at checkAndUpdateView (core.js:27541)
    at callViewAction (core.js:27782)

Answer 1

在div上使用ngStyle

<div class="my-div" [ngStyle]="{'width' : customWidth + 'px'}">
</div>

在打字稿中

customWidth = 20;

Answer 2

除了上述答案外，请尝试margin-left和width属性

<div class="my-div" [ngStyle]="{'margin-left' : customWidth + 'px'}">
</div>

根据动态输入调整Div的大小

2 个答案: