角度2：要素がクリックされたときにシフトキーが押されていないか確認します

Question

角度2のアプリでは、シフトキーを押しているときにクリックイベントが異なるようにします。これを達成する方法は？

HTMLは以下の通りです：

<div class="item" *ngFor="#obj of available" (click)="toggleSelected(obj)"></div> 

と私はこのような何かをしたい：

toggleSelected(obj) { 
    if(shift is pressed) { 
     do this 
    } else { 
     do that 
    } 
    } 

ので、Shiftキーが押された場合、私は検出することができますか？ありがとう！

Answer 1

、toggleSelected方法に$eventオブジェクトを渡す：

<div class="item" *ngFor="#obj of available" (click)="toggleSelected(obj, $event)"></div> 

をtoggleSelected方法では、イベントのshiftKeyプロパティがtrueあるかどうかを確認します。

toggleSelected(obj, event) { 
    if(event.shiftKey) { 
    do this 
    } else { 
    do that 
    } 
} 

Answer 2

使用keypress(click)結合に

<div class="item" *ngFor="#obj of available" (keypress)="eventHandler($event)"></div> 

eventHandler(event) { 
    console.log(event, event.keyCode, event.keyIdentifier); 
} 

Answer 3

あなたの質問は、テーブルのレコードの複数選択オプションを参照することがあります。

この場合、選択したオブジェクトをセットに格納できます。

public selectedRowSet: Set<MyObject> = new Set();  

レコードが選択されるたびに、次の方法を使用してセットに追加します。

public setSelectedRow(obj: MyObject, event: MouseEvent) { 
    if(!event.shiftKey) { 
    selectedRowSet.clear(); 
    } 
    selectedRowSet.add(obj); 
} 

次に、条件付き書式を追加することをお勧めします。あなたのビューの使用では

public isRowSelected(obj: MyObject): boolean 
{ 
    return selectedRowSet.has(obj); 
} 

：ここ

<tr *ngFor="let obj of myObjectCollection" 
    [class.someCssClass]="isRowSelected(obj)" 
    (click)="setSelectedRow(obj, $event);"> 
... 
</tr> 

---

REVIEW

は有用であるかもしれないいくつかの追加の調整、以下のとおりです。

• あなたが使用することを選択することができますシフトまたはCtrl
• このキーを押すと、レコードを選択解除することもできます。

私はこれが誰かにとって便利だと願っています。

public setSelectedRow(bo: Bo, event: MouseEvent) { 
    // support shift and control. 
    const add = event.shiftKey || event.ctrlKey; 
    if (!add) { 
    this.selectedRowSet.clear(); 
    this.selectedRowSet.add(bo); 
    return; 
    } 

    // toggle selected record 
    if (this.selectedRowSet.has(bo)) { 
    this.selectedRowSet.delete(bo); 
    } 
    else { 
    this.selectedRowSet.add(bo); 
    } 
}