Question

我想将Angular Material Slider与FormGroup中的FormControl一起使用。我有一个带有预定义值的列表，并且对于每个我都有一个滑块。该列表由一个包含对象的数组组成，每个对象都有一个ID和一个标题：

const array = [{id: 'anyId', title: 'theTitle'}, ...]

我需要处理滑块的标题和滑块的值，因为我有很多滑块。

所以我有类似的对象：

{id: 'anyId', value: 'sliderValue'}

<mat-list>
              <mat-list-item *ngFor="let item of array">{{item.title}}
                <mat-slider step="1" min="0" max="4" thumbLabel></mat-slider>
              </mat-list-item>
            </mat-list>

如何使用formControl进行管理？ FormControl应该将滑块的当前值设置为新值，并保存滑块的新值-都保存为数组列表的正确标题。

Answer 1

https://stackblitz.com/edit/angular-4uwzsd

extension UIImage {
func resized(toValue value: CGFloat) -> UIImage {
    if size.width > size.height {
        return self.resize(toWidth: value)!
    } else {
        return self.resize(toHeight: value)!
    }
}

item.value应该是一个数字！在这里您可以找到官方示例：https://material.angular.io/components/slider/examples

Answer 2

<mat-form-field>
            <mat-label>Modification Value</mat-label>
            <input #modValue type="number" [formControl]="modificationValue" matInput required>
</mat-form-field>
<mat-slider [value]="modValue.value" (change)="modValue.value = $event.value"></mat-slider>

尝试将@Input（）值和@Output（）更改从滑块映射到输入元素。我认为也可以像这样使用它：

<mat-slider [value]="modificationValue.value" (change)="modificationValue.setValue($event.value)"></mat-slider>

如何在Angular中将Angular Material Slider与FormControl一起使用？

2 个答案: