Question

我使用Angular和bootstrap，我希望能够在一个表上同时选择多个元素。因为我想使用它一次添加更多用户。

file.component.html

  <table class="table table-bordered table-striped" style="border: none;">
        <thead>
            <tr>
                <td class="title-column">Id</td>
                <td class="title-column">Nom</td>
                <td class="title-column">Prenom</td>
                <td class="title-column">Rôle</td>
            </tr>
        </thead>
        <tr *ngFor="let u of Utilisateur" (click)="setClickedRowList(u.id)" style="cursor: pointer;"
            [ngClass]="{'hvr-fade':!clickedList(u),'hvr-fade-selected': clickedList(u)}">
            <td class="row-left title">{{u.id}}</td>
            <td class="row-mid title">{{u.nom}}</td>
            <td class="row-mid title">{{u.prenom}}</td>
            <td *ngIf="u.admin==false" class="row-right"></td>
        </tr>
 </table>

file.component.ts

 selectedRowList: string;
 utilisateurRole: Role;
 selectedId: string;

 setClickedRowList(id: string) {
  this.selectedRowList = id;
}

 clickedList(index) {

  if(this.selectedRowList === index.id) {
   this.selectedId = index.id;

   this.utilisateurRole.admin = index.admin;

  return true;
  } else {
   return false;
  }

}

否则，如果您知道一种方法，或者我可以检查

Answer 1

您可以使用Set来跟踪选择了哪些行。这是一个简单的实现：https://stackblitz.com/edit/angular-5k2kgl

我做到了，因此在单击时选择/未选择行。并且选定的行具有蓝色背景颜色。

您可以使用getSelectedRows方法获取选定的行。

Angular如何在表中进行多项选择

1 个答案: