html - 如何在 Angular 中使用带有 FormControl 的 Angular Material Slider？

Question

我想在 FormGroup 中使用 Angular Material Slider 和 FormControl。我有一个包含预定义值的列表，每个值都有一个 slider 。该列表由一个包含对象的数组组成，每个对象都有一个 ID 和一个标题:

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

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

所以我有这样的对象:

{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 应将当前值设置为 slider 并将 slider 的新值保存到数组列表的正确标题中。

Answer 1

<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() 更改从 slider 映射到您的输入元素。我认为也可以这样使用它:

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