角2のカウンターの値を制限する方法

Question

これに続くのはplunkerです。ここで増減ボタンを使用して任意の数値を設定することができます。私は負の数を設定するためにマイナスボタンを何度もクリックすることができます。これをわずか数に制限するにはどうすればよいですか？例えば0〜5のみである。 0より大きく5を超えてはならないことを意味します。

export class CustomCounterComponent { 

    counterValue = 0; 
    @Output() counterChange = new EventEmitter(); 

    @Input() 
    get counter() { 
    return this.counterValue; 
    } 

    set counter(val) { 
    this.counterValue = val; 
    this.counterChange.emit(this.counterValue); 
    } 

    decrement() { 
    this.counter--; 
    } 

    increment() { 
    this.counter++; 
    } 
} 

Answer 1

単純なifの条件を使用してください。 Demo

decrement() { 
    if(this.counter > 0) 
     this.counter--; 
    } 

    increment() { 
    if(this.counter <5) 
     this.counter++; 
    } 

Answer 2

decrement() { 
    if(this.counter > 0) 
     this.counter--; 
} 

increment() { 
    if(this.counter < 5) 
     this.counter++; 
} 

Answer 3

あなたがこれを行うことができ、あなたのcomponent'ssのtypescriptです介して、またはあなたのコンポーネントスルーテンプレート

活字体

increment(){ 
if(this.counter < 5){ 
     this.counter++; 
    } 
} 

decrement(){ 
    if(this.counter > 0){ 
     this.counter--; 
    } 
} 

コンポーネント
チェックは01をフォーク

<button [disabled]="counter == 0" (click)="decrement()">-</button> 
<span>{{counter}}</span> 
<button [disabled]="counter == 5" (click)="increment()">+</button>