setzen mehrere Variablen auf false mit einer Methode Angular4

Question

Ich habe die folgenden Variablen:

var1 = null; 
var2 = null; 
var3 = null; 
var4 = null; 
var5 = null; 

und die folgenden Schaltflächen:

<button>btn1</button> 
<button>btn2</button> 
<button>btn3</button> 
<button>btn4</button> 
<button>btn5</button> 
<button>btnNull</button> 

was soll ich tun, ist, das var1 auf true zu setzen und alle anderen auf false, indem Sie auf btn1 klicken, das gleiche Verhalten wie bei den anderen 4 Schaltflächen und alle Variablen auf null setzen, indem Sie auf btnNull klicken.

was ich getan habe ist folgendes:

btn1(){ 
    this.var1=true; 
    this.var2=this.var3=this.var4=this.var5=false; 
} 

btn2(){ 
    this.var2=true; 
    this.var1=this.var3=this.var4=this.var5=false; 
} 

btn3(){ 
    this.var3=true; 
    this.var1=this.var2=this.var4=this.var5=false; 
} 

btn4(){ 
    this.var4=true; 
    this.var1=this.var2=this.var3=this.var5=false; 
} 

btn5(){ 
    this.var5=true; 
    this.var1=this.var2=this.var3=this.var4=false; 
} 

btnNull(){ 
    this.var1=this.var2=this.var3=this.var4=this.var5=null; 
} 

und verwendet, dass fünf Methoden jeweils in verschiedenen Tasten wie folgt aus:

<button (click)="btn1()">btn1</button> 
<button (click)="btn2()">btn2</button> 
<button (click)="btn3()">btn3</button> 
<button (click)="btn4()">btn4</button> 
<button (click)="btn5()">btn5</button> 
<button (click)="btnNull()">btnNull</button> 

, die eine Menge Code ist und sieht nicht wirklich sehr Gut, wie kann ich mit ein oder zwei Methoden das gleiche Verhalten erreichen?

Answer 1

Sie könnten ein Array erstellen .. aber ich würde nicht var als Variablenname verwenden, da es reserviert ist.

component.ts

vals = [null, null, null, null, null]; 

dann in component.html

<button *ngFor="let val of vals; let i =index" 
     (click)="vals.fill(false); vals[i] = true">btn {{i + 1}}</button> 

<button (click)="vals.fill(null);">btnNull</button> 

<p *ngFor="let val of vals; let i = index">val{{i}} = {{val}}</p>