,可以通过以下步骤实现:
下面是一个示例代码,演示如何从ngFor中动态创建的多个垫块滑块中获取值:
在组件的HTML模板中:
<div *ngFor="let item of items; let i = index">
<input type="range" [(ngModel)]="item.value" (change)="onSliderChange(i)">
<span>{{ item.value }}</span>
</div>
<button (click)="getValues()">获取所有值</button>
在组件的TypeScript代码中:
export class MyComponent {
items: any[] = [];
constructor() {
// 假设items是动态获取的数据
this.items = [
{ value: 0 },
{ value: 0 },
{ value: 0 }
];
}
onSliderChange(index: number) {
console.log('滑块值改变:', this.items[index].value);
}
getValues() {
console.log('所有值:', this.items.map(item => item.value));
}
}
在上述示例中,我们使用ngFor循环遍历items数组,并为每个元素创建一个垫块。每个垫块包含一个滑块和一个显示当前值的span元素。通过双向绑定[(ngModel)],滑块的值与items数组中对应元素的value属性进行绑定。当滑块的值改变时,会触发change事件,并调用onSliderChange函数来获取当前滑块的值。点击"获取所有值"按钮时,会调用getValues函数来获取所有滑块的值。
这样,我们就可以从ngFor中动态创建的多个垫块滑块中获取值了。
腾讯云相关产品和产品介绍链接地址:
云+社区技术沙龙[第27期]
腾讯技术开放日
DB TALK 技术分享会
云+社区技术沙龙[第22期]
云+社区技术沙龙[第10期]
腾讯云GAME-TECH沙龙
第三期Techo TVP开发者峰会
云+社区开发者大会 长沙站
领取专属 10元无门槛券
手把手带您无忧上云