javascript - primeng 的 slider 值不更新

Question

我有一个带有 slider 和两个按钮的简单组件:

app.component.html

<p-slider [(ngModel)]="val" [min]="0" [max]="100" [step]="1"></p-slider>

<button pButton type="button" label="Next" (click)="next()"></button>
<button pButton type="button" label="Reset" (click)="reset()"class="ui-button-secondary"></button>

app.component.ts

import { Component } from '@angular/core';
import { SliderService } from './slider.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  val: number;

  next() {
    this.val++;
  }

  reset() {
    this.val = 0;
  }
}

问题是，当我点击 Next 按钮时，它什么也没做。它应该增加 slider 值。

堆栈 Blitz link .

Answer 1

因为val的值是undefined。您应该将 slider 值初始化为某个数字，例如 val: number = 0。当您调用您的 next() 方法时，它会增加值 undefined，从而为您提供 NAN。

更新的 app.component.ts:

import { Component } from '@angular/core';
import { SliderService } from './slider.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  val: number = 0; // Initialize your val's value

  next() {
    this.val++;
  }

  reset() {
    this.val = 0;
  }
}

已更新，正在运行 stackblitz .