按下控制鍵並選擇每一行，在表格中選擇多行。我怎樣才能應用這在角2

Question

我怎樣才能應用這個在我的角2項目。我有一個包含數據的表。我希望表格的行可以選擇。通過按住控制鍵並選擇每行，可以完成多行表格行選擇。我能夠選擇1行，但很難實現使用控制鍵的多重選擇。我想將數據從表格傳輸到數組。

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











} 

在我的HTML，表中包含的人員名單。點擊事件接受的人作爲參數，我將推入selectedPersonArray。如果未按下控制鍵，則只能選擇一個人並推送至selectedPersonArray。如果控制按下，所有選定的人將被推送到selectedPersonArray。

Answer 1

您可以擺脫document:keydown處理程序，並只使用一個處理程序來處理它。

視圖

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

參見Plunker Example

Answer 2

我建議使用PrimeNG DataTable的模塊用於此目的：

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