将初始值设置为 Angular 中的输入范围

Question

对于我的一个项目，我实现了一个具有自定义样式的输入范围滑块。当组件初始化时，我想将最大价格设置为滑块中的默认值。我尝试了几种方法，但找不到解决方案。有人可以告诉我做错了什么吗？这是我的实现的 stackblitz 演示

Answer 1

您需要为值创建一个输入属性并设置表单控件并将其绑定到输入元素，就像这个 组件一样

  @Input() value:number; // default value

  constructor(){

    this.inputForm = new FormGroup({priceRangeSlider : new FormControl(null)});

  }

  ngOnInit() {

    this.slider.valueChanges.subscribe(values =>{

      this.priceForDisplay = values;

    })

    this.inputForm.get('priceRangeSlider').setValue(this.value); // init value set 

  }

模板

    <div class="slider-container">

      <input

        class="slider"

        type="range"

        formControlName="priceRangeSlider"

        [min]="minPrice"

        [max]="maxPrice"

        step="100"

        [value]="value"

      />

    </div>

应用程序模板

<app-user [minPrice]="1000" [maxPrice]="10000"  [value]="4000"><app-user>

Answer 2

我编辑了您的代码示例：https ://stackblitz.com/edit/create-a-basic-angular-component-amnhih

我将 FormControl 绑定到滑块元素，并将初始setValue调用移至订阅下方。