Javascript priming的值'；s滑块不'；t更新

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

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>

问题是，当我单击

Next

按钮时，它什么也不做。它应该增加滑块的值

---

Stackblitz.

这是因为

val

的值是

未定义的。您应该将滑块值初始化为一些数字，如
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;
  }
}

更新后的系统正在运行

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;
  }
}