テーブルの複数の行を選択するには、Ctrlキーを押しながら各行を選択します。これを角2に適用するにはどうすればいいですか？

Question

角度2のプロジェクトでこれをどのように適用できますか？私はデータを含むテーブルを持っています。私はテーブルの行を選択可能にしたい。テーブル行の複数の選択は、制御キーを押しながら各行を選択することによって行われます。私は1行の選択を行うことができましたが、コントロールキーを使用して複数選択を実装するのは苦労しました。テーブルから配列にデータを転送したい。私のHTMLで

HTML

<tbody> 
    <tr *ngFor="let person of people (click)="addThisPersonToArray(person)" [class.active]="isPersonSelected(person)"> 
     <td>{{person.id}}</td> 
     <td>{{person.firstName}}</td> 
     <td>{{person.lastName}}</td> 
    </tr> 
</tbody> 

私のコンポーネントで

export class PersonTableComponent{ 
    selectedPersonArray = []; 
    people = []; 
    isKeyPressed: boolean: false; 

    constructor(public person: PersonListService { 
     this.people = person.fetchData(); 
    } 


    addThisPersonToArray(person: Person){ 
     if(this.isKeyPressed == false){ 
      this.selectedPersonArray =[]; //clear array coz ctrl not pressed it selectedPerson should only be one. 
     } 
     this.selectedPersonArray.push(person); 
    } 

    //check if person exist in the array return if true otherwise false. 
    // return of true will make the row active thus changing the color and 
    // indicating it is selected 

    isPersonSelected(person: Person){ 
     if(this.selectedPersonArray.indexOf(store) != -1){ 
      return true; 
     } 
     return false; 
    } 


    @HostListener('document:keydown', ['$event']) 
    handleKeyboardEvent(event: KeyboardEvent) { 
    if (event.ctrlkey) { 
     this.isKeyPressed= true; 
    } 
    else{ 
     this.isKeyPressed = false; 
    } 











} 

、テーブルには、人物のリストが含まれています。 clickイベントは、choosePersonArrayにプッシュするパラメータとして人を受け入れます。コントロールキーが押されていない場合は、1人の人しか選択できず、selectedPersonArrayに移動します。コントロールが押されると、選択されたすべての人物がselectedPersonArrayにプッシュされます。

Answer 1

document:keydownハンドラを取り除き、1つのハンドラで処理することができます。

ビュー

(click)="addThisPersonToArray(person)" 

コンポーネント

toggleItemInArr(arr, item) { 
    const index = arr.indexOf(item); 
    index === - 1 ? arr.push(item) : arr.splice(index, 1); 
} 

addThisPersonToArray(person: any, event) { 
    if (!event.ctrlKey) { 
    this.selectedPersonArray = []; 
    } 

    this.toggleItemInArr(this.selectedPersonArray, person); 
} 

isPersonSelected(person: any) { 
    return this.selectedPersonArray.indexOf(person) !== -1); 
} 

も参照してください私は、この目的のためにPrimeNGのDataTableのモジュールを使用することをお勧めPlunker Example

Answer 2

：

https://www.primefaces.org/primeng/#/datatable/selection