angular - 从 ngFor 中动态创建的多个 mat-slider 获取值
问题描述
我在 Angular 中动态创建多个垫子滑块,如下所示:
<ng-container *ngFor="let parameter of parameterValues; let i = index;">
<mat-slider (input)="onInputChange($event)" min="1" max="{{ parameter.length }}" step="1" value="1" id="{{ 'myslider' + i }}"></mat-slider>
</ng-container>
当任何滑块位置发生更改时,我想触发一个事件,该事件随后调用另一个函数,该函数接收一个数组'sliderValues',其中包含每个动态创建的垫滑块值。我正在尝试这样做:
onInputChange(event: MatSliderChange) {
for (let i = 0; i < this.results.parameterNames.length; i++) {
const theid = "myslider" + i;
var ele = document.getElementById(theid)
console.log((ele as HTMLInputElement).id + " is the id");
console.log((ele as HTMLInputElement).value + " is the value");
this.sliderValues.push((ele as HTMLInputElement).value);
}
//some function called here which accepts 'this.sliderValues' as a parameter
}
这目前不起作用;我无法访问滑块的值。在控制台中,我看到“id”报告正确,但“值”是“未定义”。任何帮助表示赞赏,如果需要,我愿意以完全不同的方式进行操作。
解决方案
我找到了一种更清洁的方法。该值可以从以下位置获得:
event.value
以及来自:
event.source._elementRef.nativeElement.id
'value' 和 'source' 都可以从 MatSliderChange 'event' 对象访问
推荐阅读
- javascript - Webpack 4 - 动态导入无法设置正确的位置
- python - 在 Python 中查找变量的总和
- r - 移动到 RStudio 中的匹配大括号
- python - 自定义插件上的默认子插件
- java - SpringBoot UnfinishedStubingException 与 RestTemplate 模拟
- google-app-engine - 如何从 App Engine 快速入门中取消部署“helloworld.go”,而是指向存储桶中的 html?
- git - 如何在合并提交中显示功能分支的所有单独提交?
- java - 在tomcat服务器中运行时如何在eclipse中提供相对路径
- ionic3 - Ionic Cordova Youtube 视频播放器错误:console.warn:Ionic Native:尝试调用 YoutubeVideoPlayer.openVideo,但 Cordova 不可用
- javascript - Web Share API - 使用 NFC 分享 URL