Angular使用ngModel获取Material滑块值设置OSM图层不透明度问题

核心错误原因 #

你在setupLayer方法中直接使用opacityslider.value是报错的根本原因：HTML标签的id属性不会自动映射为TypeScript组件类中的可用变量，TS编译阶段无法识别这个未声明的变量。

最优解决方案 #

你已经通过[(ngModel)]实现了滑块值和组件属性opacityvalue的双向绑定，完全不需要直接读取滑块DOM的属性，用已有的opacityvalue变量即可，改造代码如下： #

第一步：调整TypeScript代码

首先你之前在setupLayer中把图层定义为局部变量，后续滑块值变化时无法访问到该实例更新不透明度，所以先把图层提到类属性级别：

export class OpacityComponent {
  // 双向绑定的滑块值
  public opacityvalue: number = 0.5;
  // 图层实例改为全局属性
  public openStreetMap!: TileLayer;

  public opacityStyle(event: MatSliderChange) {
    console.log(event.value);
    // 滑动时实时更新图层不透明度
    if(this.openStreetMap) {
      this.openStreetMap.setOpacity(event.value as number);
    }
  }
  
  constructor() { }
 
  public setupLayer(){
    this.openStreetMap = new TileLayer({
      title: 'Open Street Map',
      source: new OSM(),
      // 直接用双向绑定的变量作为初始不透明度
      opacity: this.opacityvalue,
    });
  }
}

第二步：HTML代码无需改动

你现有的滑块绑定逻辑已经可以正常工作，滑动时会自动更新opacityvalue同时触发opacityStyle回调同步修改图层不透明度，插值绑定的输入框展示也不受影响：

<mat-slider id="opacityInput" thumbLabel step="0.1" min="0" max="1" aria-label="units"
  [(ngModel)]="opacityvalue" (input)="opacityStyle($event)">
</mat-slider>
<input value = {{opacityvalue}} />

可选补充说明 #

如果你确实需要在TS中直接操作滑块DOM实例，可以通过@ViewChild获取：

// 先引入对应依赖
import { ViewChild } from '@angular/core';
import { MatSlider } from '@angular/material/slider';

export class OpacityComponent {
  // 获取滑块实例
  @ViewChild('opacitySlider') opacitySlider!: MatSlider;
  // 其余代码不变...
}

同时给HTML的mat-slider标签加上模板引用变量：

<mat-slider #opacitySlider ...其余属性不变>

但这个方案对你当前的场景属于冗余操作，优先使用双向绑定的变量即可。

内容的提问来源于stack exchange，提问作者Chris S.