javascript - angular6中选定行中的事件下拉列表

Question

我已经在 Angular 6 中创建了一个表。

我想要的是每当我点击特定行的编辑按钮时，它应该为该特定 Angular 色启用 Angular 色下拉列表。截至目前，它正在为所有行启用它。

<th>
        <div id="thRole">
            <div *ngIf="!editRole else editRoleT">
                        {{user.description}}
                        <a (click)="EditRoles()">Edit</a>
            </div>
            <ng-template #editRoleT>
                    <select  name="rolelevel" id="drp" >
                            <option *ngFor="let role of roles " selected="role.id" value="role.id">{{role.description}}</option>
                        </select>
                        <a (click)="EditRoles()" >Add</a>
            </ng-template>
        </div>
       </th> 

EditRole()

  EditRoles(){
     this.editRole=!this.editRole;
}

我该怎么做？

编辑:所有表格

<nz-table
  #rowSelectionTable
  [nzData]="data"
  (nzCurrentPageDataChange)="currentPageDataChange($event)"
  (nzPageIndexChange)="refreshStatus()"
  (nzPageSizeChange)="refreshStatus()">
  <thead>
    <tr style="text-align: right;">
      <th ></th>
      <th style="text-align:right;font-family:  B Koodak;font-size: 16px">نام</th>
      <th  style="text-align:right;font-family: B Koodak;font-size: 16px">ایمیل</th> 
      <th  style="text-align:center;font-family: B Koodak;font-size: 16px">نقش</th> 
      <th  style="text-align:right;font-family: B Koodak;font-size: 16px">اکانت</th>
     <th  style="text-align:center;font-family:B Koodak;font-size: 16px">عملیات</th>
    </tr>
  </thead>
  <tbody id="tbody">
    <tr *ngFor="let user of data | searchuser: nameSearch: emailSearch: roleSearch">
      <td >
         <i nz-icon (click)="infoUser(user.id)" style="cursor:pointer;" type="info-circle" theme="outline"></i>
        </td> 
      <td  style="text-align:right;font-family: Iranian Sans;font-weight: 500;font-size: 13px">{{user.desplayName}}</td>
      <td  style="text-align:right;font-family: Iranian Sans;font-weight: 500;font-size: 13px">{{user.email}}</td> 
      <th  style="text-align:right;font-family: Iranian Sans;font-weight: 500;font-size: 13px;width: 239px;">
        <div id="thRole">
            <div *ngIf="!editRole else editRoleT">
                        {{user.description}}
                        <a (click)="EditRoles()" style="color:#ffaa2a;float: left;text-decoration: blue;">ویرایش</a>
            </div>
            <ng-template #editRoleT>
                    <select  name="rolelevel" id="drp" >
                            <option *ngFor="let role of roles " selected="role.id" value="role.id">{{role.description}}</option>
                        </select>
                        <a (click)="EditRoles()" style="padding-top: 8px;color:#055f09;float: left;text-decoration: blue;">ثبت</a>
            </ng-template>
        </div>
       </th> 
      <th style="text-align:center;font-family: Iranian Sans;font-weight: 500;font-size: 13px">
            <p-inputSwitch [(ngModel)]="user.isActive" (click)="changeActive(user.id)"></p-inputSwitch>
      <th style="text-align:center;font-weight: 500;font-family: Iranian Sans;font-size: 13px">
         <a id="noconfirm">حذف</a>
      </th>
    </tr>
  </tbody>

</nz-table>

这是所有表格代码。

Answer 1

有多种方法可以处理您的场景，但最简单的方法是必须存储行索引并与每一行匹配。

<tr *ngFor="let user of data; let rowIndex of index | searchuser: nameSearch: emailSearch: roleSearch">
      <td >
         <i nz-icon (click)="infoUser(user.id); seletedRowIndex = rowIndex" style="cursor:pointer;" type="info-circle" theme="outline"></i>
        </td> 
      <td  style="text-align:right;font-family: Iranian Sans;font-weight: 500;font-size: 13px">{{user.desplayName}}</td>
      <td  style="text-align:right;font-family: Iranian Sans;font-weight: 500;font-size: 13px">{{user.email}}</td> 
      <th  style="text-align:right;font-family: Iranian Sans;font-weight: 500;font-size: 13px;width: 239px;">
        <div id="thRole">
            <div *ngIf="!(seletedRowIndex === rowIndex) else editRoleT">
                        {{user.description}}
                        <a (click)="EditRoles()" style="color:#ffaa2a;float: left;text-decoration: blue;">ویرایش</a>
            </div>
            <ng-template #editRoleT>
                    <select  name="rolelevel" id="drp" >
                            <option *ngFor="let role of roles " selected="role.id" value="role.id">{{role.description}}</option>
                        </select>
                        <a (click)="seletedRowIndex = rowIndex" style="padding-top: 8px;color:#055f09;float: left;text-decoration: blue;">ثبت</a>
            </ng-template>
        </div>
       </th> 
      <th style="text-align:center;font-family: Iranian Sans;font-weight: 500;font-size: 13px">
            <p-inputSwitch [(ngModel)]="user.isActive" (click)="changeActive(user.id)"></p-inputSwitch>
      <th style="text-align:center;font-weight: 500;font-family: Iranian Sans;font-size: 13px">
         <a id="noconfirm">حذف</a>
      </th>
    </tr>

Note : the code is written directly on Stackoverflow editor so there could be typo or syntactical error. Please correct yourself.