Question

我有一个带滑块和两个按钮的简单组件：

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按钮时，它什么也没做。它应该增加滑块值。

Stackblitz link。

Answer 1

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

更新了app.component.ts：

NAN

更新后的stackblitz。

primeng滑块的值不会更新

1 个答案: