は一つの方法Angular4

Question

をfalseに複数の変数を設定し、私は、次の変数があります。

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

と、次のボタンを：私は何をしたいか

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

はtrueにVAR1を設定することであり、 btn1をクリックすると他のすべてのボタンがfalseになり、他の4つのボタンと同じ動作になり、btnNullをクリックしてすべての変数をnullに設定します。私が何をしたか

は以下の通りです：

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

をして使用されている5つの方法このような異なるボタンで各1：コードの多くをだと、本当にとても見えません

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

どのように私は1つまたは2つの単一のメソッドで同じ動作を達成できますか？

Answer 1

アレイを作成することはできますが、varは予約済みなので変数名として使用しません。

component.ts

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

はその後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>