Mat0-Slider ngModel 不工作角度 5答案

【问题标题】：Mat0-Slider ngModel not working angular 5Mat0-Slider ngModel 不工作角度 5
【发布时间】：2018-08-09 12:30:57
【问题描述】：

我正在尝试从角度材料（角度 5）实现垫滑块，一切正常，除了滑动滑块时 ngModel 没有改变，这里是代码

<li class=normal *ngFor="let f of filters" attr.data-default={{f.default}}>
    <div>
        <small>
            {{f.name}}
        </small>
    </div>
    <mat-slider step="{{f.step}}" min='{{f.min}}' max={{f.max}} [(ngModel)]='effects[f.function]' [value]=f.default (input)="pictureManip($event, f.function, 0)" [id]=f.name></mat-slider>

对于打字稿功能，我做了一些基本的事情

effects = [
    0,0, 0, 1, false, false
];
...
pictureManip($event, code, level){
    console.log(this.effects[code]);
}

输出始终为 0...我不明白，当我与其他人（复选框）检查时，ngModel 更新为 true / false 但不是滑块，始终为 0...

【问题讨论】：

“f”长什么样子？
f 代表过滤器数组条目 ex : [{blur :0, step:1},{contrast:1, step:1}]...
检查。那么 f.function 是对象中的实际函数吗？还是函数引用？
一个函数参考，我的意思是pictureManip有一个开关循环帽子检查函数参考。

标签： javascript angular typescript angular-material angular5

【解决方案1】：

输入事件告诉您滑块拇指位置发生了什么。那不是滑块模型的价值。更改事件为您提供滑块模型值的更改。

    (change)="pictureManip($event, f.function, 0)"

【讨论】：