asdddddddddddddddddddddddddddd

Question

sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS，

Answer 1

您可以将数字选择存储为类
1. value

   的单独属性，您可以将其绑定到

   ngModel

   。

您必须将 name 属性设置为
2. ngModel

   元素，因此我将名称设置为

   slider-<<index>>

   ，我们使用 for 循环的

   $index

   获取索引。

单独使用
3. ngModel

   ，不会出现表单控制错误，要绕过此错误，可以使用滑块上的属性

   ngDefaultControl

   。

您缺少每个滑块的
4. matThumb

   输入。

将
5. input

   事件替换为

   ngModelChange

   ，因为它可以直接访问

   ngModel

   值。我们可以直接从这里拨打

   setFeedback

   。

事件的值是字符串类型，因此我使用
6. +

   三元运算符将其转换为数字并进行检查。

完整代码：

TS：

import { Component } from '@angular/core';
import { MatSliderModule } from '@angular/material/slider';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

export class Question {
  questionText: string;
  answer: string;
  value = 0;

  constructor(question: string) {
    this.questionText = question;
    this.answer = 'Ei arvosteltu'; // Default answer
  }

  setFeedback(value: string): void {
    this.value = +value;
    if (this.value === 0) {
      this.answer = 'Ei arvosteltu'; // Not rated yet
    } else if (this.value === 1) {
      this.answer = 'Huono'; // Bad
    } else if (this.value === 2) {
      this.answer = 'Kohtalainen'; // Okay
    } else if (this.value === 3) {
      this.answer = 'Hyvä'; // Good
    }
  }
}

/**
 * @title Basic slider
 */
@Component({
  selector: 'slider-overview-example',
  templateUrl: 'slider-overview-example.html',
  styleUrl: 'slider-overview-example.css',
  imports: [MatSliderModule, FormsModule, CommonModule],
})
export class SliderOverviewExample {
  questions: Question[] = [
    new Question('Kysymys 1'),
    new Question('Kysymys 2'),
    new Question('Kysymys 3'),
  ];
}

HTML：

<div class="container">
  <div class="feedback" *ngFor="let question of questions;let i = index">
    <p>{{ question.questionText }}</p>
    <mat-slider
      [min]="0"
      [max]="3"
      [step]="1"
      [name]="'slider' + i"
      [(ngModel)]="question.value"
      ngDefaultControl
      (ngModelChange)="question.setFeedback($event)"
      color="accent"
      aria-label="Feedback slider"
    >
      <input matSliderThumb />
    </mat-slider>
    <p>Feedback: {{ question.answer }}</p>
  </div>
</div>

Stackblitz 演示