不顯示 Angular-mat-slider

Question

在我的 HTML 文件中，我嘗試使用 matslider 以便使用滑塊進行調查。 matslider 根本沒有出現。 我不確定為什么將它導入 app.module.ts

<mat-card>
    <mat-card-header>
        <mat-icon>question_answer</mat-icon>
        <mat-card-title>{{question}}</mat-card-title>
        <mat-card-subtitle>{{direction}}</mat-card-subtitle>
    </mat-card-header>
    <mat-slider min="minValue" max="maxValue" step="1" value="1"(change)="sliderChanged($event)"> 
    </mat-slider> 

應用程序模塊.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatSliderModule } from '@angular/material/slider';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SurveyCardComponent } from './components/survey-card/survey-card.component';


@NgModule({
  declarations: [
    AppComponent,
    SurveyCardComponent
   
  ],
  imports: [
    BrowserModule,
    MatSliderModule,
    MatCardModule,
    MatIconModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我想，您的組件 class 中有一些變量，例如：

minValue = 0;
maxValue = 100;
step = 1;
value = 1;

然后，在您的模板中，您需要使用屬性綁定：

方括號[]導致 Angular 將賦值的右側計算為動態表達式。 如果沒有方括號，Angular 會將右側視為字符串文字，並將屬性設置為 static 的值。

<mat-slider
  [min]="minValue"
  [max]="maxValue"
  [step]="step"
  [(ngModel)]="value"
  (ngModelChange)="modelChanged($event)">
</mat-slider>

不過，您應該檢查瀏覽器控制台以了解更多錯誤。