angular6 中選定行中的活動下拉列表

Question

我在 Angular 6 中創建了一個表。

我想要的是每當我點擊特定行的編輯按鈕時，它應該啟用該特定角色的角色下拉列表。 截至目前，它正在為所有行啟用它。

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

編輯角色()

  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>

注意：代碼直接在 Stackoverflow 編輯器上編寫，因此可能存在拼寫錯誤或語法錯誤。 請自行糾正。

Answer 2

請看一下這段代碼。 向用戶對象添加一個 editRole 變量並檢查該特定用戶的 editRole 是否已更改。 也用 div 替換 ng-template。

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

現在在編輯角色功能中使用類似的方法

EditRoles(user){
     // Find the user from data object and invert editRole
}

Answer 3

在your-component.component.html

使用 [(ngModel)] 綁定選定的 roleId。

<select  name="rolelevel" id="drp" [(ngModel)]="selectedRoleId">
  <option *ngFor="let role of roles " [value]="role.id">{{ role.description }}
  </option>
</select>

在your-component.component.ts

selectedRoleId;

不要忘記在您的功能模塊中導入 FormsModule。

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
   ...
   FormsModule,
   ...
  ]
})
export class YourModule {}